Morphing de forme de particules Three.js avec contrôles

1651 alex01001010

Ouvrir dans l'éditeur Video Publiez votre code

Morphing de forme de particules Three.js avec contrôles

Recommandé

31 January 2026

Chargeur WebGL Tattletail Unity avec barre de progression

23 August 2024

Page de destination de React Netflix

18 December 2025

Pied de page d'attribution CSS : Fixe, Centré, Transparent

HTML

#container {
        width: 100%;
        height: 100%;
        position: relative;
    }

#ui {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: white;
        z-index: 1000;
    }

#controls {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
        z-index: 1000;
    }

.control-group {
        background: rgba(0, 0, 0, 0.6);
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
    }

.slider-container {
        margin: 10px 0;
    }

.slider-container label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
    }

input[type="range"] {
        width: 200px;
        margin-right: 10px;
    }

input[type="color"] {
        width: 50px;
        height: 25px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

#ui > * {
        margin-bottom: 10px;
    }

.button {
        cursor: pointer;
        padding: 10px 15px;
        border: 2px solid transparent;
        border-radius: 25px;
        background-color: rgba(255, 255, 255, 0.1);
        color: #fff;
        font-size: 16px;
        transition: all 0.3s ease;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        width: 140px;
        text-align: center;
        position: relative;
        overflow: hidden;
    }

.button:hover {
        background-color: rgba(255, 255, 255, 0.2);
        border-color: #fff;
        transform: scale(1.05);
    }

.button.active {
        background-color: rgba(255, 89, 0, 0.8);
        border-color: #ff5900;
        transform: scale(1.1);
    }

.button::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

.button:hover::after {
        opacity: 1;
    }

#title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        background: linear-gradient(45deg, #ff5900, #ffcc00);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

#info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: white;
        font-size: 14px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
        pointer-events: none;
    }
</style>

<div id="container"></div>
<div id="ui">
    <div id="title">Shape Morpher</div>
    <div class="button" data-shape="sphere">Sphere</div>
    <div class="button" data-shape="cube">Cube</div>
    <div class="button" data-shape="torus">Torus</div>
    <div class="button" data-shape="icosahedron">Icosahedron</div>
    <div class="button" data-shape="teapot">Teapot</div>
    <div class="button" data-shape="dna">DNA</div>
</div>

<div id="controls">
    <div class="control-group">
        <div class="slider-container">
            <label>Particle Size: <span id="sizeValue">0.035</span></label>
            <input type="range" id="particleSize" min="0.01" max="0.1" step="0.001" value="0.035">
        </div>
        <div class="slider-container">
            <label>Rotation Speed: <span id="speedValue">0.1</span></label>
            <input type="range" id="rotationSpeed" min="0" max="0.5" step="0.01" value="0.1">
        </div>
        <div class="slider-container">
            <label>Particle Color:</label>
            <input type="color" id="particleColor" value="#ff5900">
        </div>
    </div>
    <div class="control-group">
        <div class="slider-container">
            <label>Bloom Strength: <span id="bloomValue">0.8</span></label>
            <input type="range" id="bloomStrength" min="0" max="2" step="0.1" value="0.8">
        </div>
        <div class="slider-container">
            <label>Motion Trail: <span id="trailValue">0.3</span></label>
            <input type="range" id="motionTrail" min="0" max="0.95" step="0.05" value="0.3">
        </div>
    </div>
</div>

<div id="info">Drag to rotate | Scroll to zoom | Double-click to reset view</div>

let scene, camera, renderer, controls, particleSystem, currentGeometry;
    const numParticles = 25000;
    const clock = new THREE.Clock();
    let targetPositions = [];
    let animationProgress = 1;
    const animationDuration = 1.5;
    let selectedButton = null;
    let composer, bloomPass;
    let trailTexture, trailScene, trailCamera, trailComposer;

const params = {
        particleSize: 0.035,
        particleColor: 0xff5900,
        rotationSpeed: 0.1,
        bloomStrength: 0.8,
        bloomRadius: 0.5,
        bloomThreshold: 0.85,
        ambientLightIntensity: 0.7,
        directionalLightIntensity: 1,
        motionTrail: 0.3
    };

init();
    animate();

function init() {
        initScenes();
        initLights();
        initComposers();
        initControls();
        createParticleSystem();
        initEventListeners();
        initTrailEffect();
    }

function initScenes() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x050505);
        scene.fog = new THREE.Fog(0x050505, 10, 50);

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.toneMappingExposure = 1;
        document.getElementById('container').appendChild(renderer.domElement);

trailScene = new THREE.Scene();
        trailCamera = camera.clone();
        trailTexture = new THREE.WebGLRenderTarget(
            window.innerWidth,
            window.innerHeight,
            {
                minFilter: THREE.LinearFilter,
                magFilter: THREE.LinearFilter,
                format: THREE.RGBAFormat
            }
        );
    }

function initLights() {
        const ambientLight = new THREE.AmbientLight(0xffffff, params.ambientLightIntensity);
        scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, params.directionalLightIntensity);
        directionalLight.position.set(1, 3, 2);
        directionalLight.castShadow = true;
        scene.add(directionalLight);
    }

function initComposers() {
        composer = new EffectComposer(renderer);
        const renderPass = new RenderPass(scene, camera);
        composer.addPass(renderPass);

bloomPass = new UnrealBloomPass(
            new THREE.Vector2(window.innerWidth, window.innerHeight),
            params.bloomStrength,
            params.bloomRadius,
            params.bloomThreshold
        );
        composer.addPass(bloomPass);

const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
        composer.addPass(gammaCorrectionPass);

trailComposer = new EffectComposer(renderer, trailTexture);
        const trailRenderPass = new RenderPass(trailScene, trailCamera);
        trailComposer.addPass(trailRenderPass);
    }

function createParticleSystem() {
        const geometry = new THREE.BufferGeometry();
        const positions = new Float32Array(numParticles * 3);
        const colors = new Float32Array(numParticles * 3);
        const sizes = new Float32Array(numParticles);

targetPositions = new Float32Array(numParticles * 3);

for (let i = 0; i < numParticles; i++) {
            const phi = Math.acos(-1 + (2 * i) / numParticles);
            const theta = Math.sqrt(numParticles * Math.PI) * phi;
            const x = Math.sin(phi) * Math.cos(theta);
            const y = Math.sin(phi) * Math.sin(theta);
            const z = Math.cos(phi);

positions[i * 3] = x * 1.5;
            positions[i * 3 + 1] = y * 1.5;
            positions[i * 3 + 2] = z * 1.5;

targetPositions[i * 3] = positions[i * 3];
            targetPositions[i * 3 + 1] = positions[i * 3 + 1];
            targetPositions[i * 3 + 2] = positions[i * 3 + 2];

const color = new THREE.Color(params.particleColor);
            color.offsetHSL(0, 0, (Math.random() - 0.5) * 0.5);
            colors[i * 3] = color.r;
            colors[i * 3 + 1] = color.g;
            colors[i * 3 + 2] = color.b;

sizes[i] = params.particleSize * (0.8 + Math.random() * 0.4);
        }

geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1));

const material = new THREE.PointsMaterial({
            size: params.particleSize,
            vertexColors: true,
            blending: THREE.AdditiveBlending,
            depthTest: true,
            depthWrite: false,
            transparent: true,
            opacity: 0.9,
            sizeAttenuation: true
        });

particleSystem = new THREE.Points(geometry, material);
        scene.add(particleSystem);

const trailParticles = particleSystem.clone();
        trailScene.add(trailParticles);
    }

const trailPass = new ShaderPass(trailMaterial);
        trailPass.renderToScreen = true;
        composer.addPass(trailPass);
    }

function initEventListeners() {
        const buttons = document.querySelectorAll('.button');
        buttons.forEach(button => {
            button.addEventListener('click', handleButtonClick);
        });

const initialShape = 'sphere';
        document.querySelector(`[data-shape="${initialShape}"]`).classList.add('active');
        selectedButton = document.querySelector(`[data-shape="${initialShape}"]`);
        morphToShape(initialShape);

document.getElementById('particleSize').addEventListener('input', (e) => {
            params.particleSize = parseFloat(e.target.value);
            document.getElementById('sizeValue').textContent = params.particleSize.toFixed(3);
            updateParticleSystem();
        });

document.getElementById('rotationSpeed').addEventListener('input', (e) => {
            params.rotationSpeed = parseFloat(e.target.value);
            document.getElementById('speedValue').textContent = params.rotationSpeed.toFixed(2);
        });

document.getElementById('particleColor').addEventListener('input', (e) => {
            params.particleColor = new THREE.Color(e.target.value).getHex();
            updateParticleSystem();
        });

document.getElementById('bloomStrength').addEventListener('input', (e) => {
            params.bloomStrength = parseFloat(e.target.value);
            document.getElementById('bloomValue').textContent = params.bloomStrength.toFixed(1);
            bloomPass.strength = params.bloomStrength;
        });

document.getElementById('motionTrail').addEventListener('input', (e) => {
            params.motionTrail = parseFloat(e.target.value);
            document.getElementById('trailValue').textContent = params.motionTrail.toFixed(2);
        });

window.addEventListener('resize', onWindowResize, false);

renderer.domElement.addEventListener('dblclick', () => {
            camera.position.set(0, 0, 5);
            camera.lookAt(0, 0, 0);
            controls.reset();
        });
    }

function handleButtonClick(event) {
        const shape = event.target.dataset.shape;
        if (selectedButton) {
            selectedButton.classList.remove('active');
        }
        selectedButton = event.target;
        selectedButton.classList.add('active');
        morphToShape(shape);
    }

function createDNAShape() {
        const points = [];
        const numPoints = 100;
        const radius = 1;
        const height = 3;
        const turns = 2;
        
        for (let i = 0; i < numPoints; i++) {
            const t = (i / numPoints) * Math.PI * 2 * turns;
            const x = Math.cos(t) * radius;
            const y = (i / numPoints) * height - height / 2;
            const z = Math.sin(t) * radius;
            points.push(new THREE.Vector3(x, y, z));
            
            const offset = Math.PI;
            const x2 = Math.cos(t + offset) * radius;
            const z2 = Math.sin(t + offset) * radius;
            points.push(new THREE.Vector3(x2, y, z2));
        }
        
        return points;
    }

function morphToShape(shapeType) {
        let targetGeometry;
        let targetVertices = [];

switch (shapeType) {
            case 'sphere':
                targetGeometry = new THREE.SphereGeometry(1.5, 64, 64);
                break;
            case 'cube':
                targetGeometry = new THREE.BoxGeometry(2.2, 2.2, 2.2);
                break;
            case 'torus':
                targetGeometry = new THREE.TorusGeometry(1.2, 0.4, 32, 200);
                break;
            case 'icosahedron':
                targetGeometry = new THREE.IcosahedronGeometry(1.7, 3);
                break;
            case 'teapot':
                targetGeometry = new TeapotGeometry(1.2, 16);
                break;
            case 'dna':
                targetVertices = createDNAShape();
                break;
            default:
                return;
        }

if (shapeType !== 'dna') {
            targetGeometry.computeVertexNormals();
            const targetPositionAttribute = targetGeometry.getAttribute('position');
            for (let i = 0; i < targetPositionAttribute.count; i++) {
                const vertex = new THREE.Vector3();
                vertex.fromBufferAttribute(targetPositionAttribute, i);
                targetVertices.push(vertex);
            }
        }

for (let i = 0; i < numParticles; i++) {
            const vertexIndex = i % targetVertices.length;
            const targetVertex = targetVertices[vertexIndex];
            targetPositions[i * 3] = targetVertex.x;
            targetPositions[i * 3 + 1] = targetVertex.y;
            targetPositions[i * 3 + 2] = targetVertex.z;
        }

animationProgress = 0;
        if (shapeType !== 'dna') {
            currentGeometry = targetGeometry;
        }
    }

function updateParticleSystem() {
        if (!particleSystem) return;

const colors = particleSystem.geometry.attributes.color.array;
        const sizes = particleSystem.geometry.attributes.size.array;

for (let i = 0; i < numParticles; i++) {
            const color = new THREE.Color(params.particleColor);
            color.offsetHSL(0, 0, (Math.random() - 0.5) * 0.5);
            colors[i * 3] = color.r;
            colors[i * 3 + 1] = color.g;
            colors[i * 3 + 2] = color.b;

sizes[i] = params.particleSize * (0.8 + Math.random() * 0.4);
        }

particleSystem.geometry.attributes.color.needsUpdate = true;
        particleSystem.geometry.attributes.size.needsUpdate = true;
        particleSystem.material.size = params.particleSize;
    }

function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        composer.setSize(window.innerWidth, window.innerHeight);
        trailTexture.setSize(window.innerWidth, window.innerHeight);
        trailComposer.setSize(window.innerWidth, window.innerHeight);
    }

function animate() {
        requestAnimationFrame(animate);

const delta = clock.getDelta();

if (particleSystem) {
            particleSystem.rotation.y += delta * params.rotationSpeed;

if (animationProgress < 1) {
                animationProgress += delta / animationDuration;
                animationProgress = Math.min(animationProgress, 1);

const positions = particleSystem.geometry.attributes.position.array;
                for (let i = 0; i < numParticles * 3; i++) {
                    positions[i] += (targetPositions[i] - positions[i]) * (delta / animationDuration);
                }
                particleSystem.geometry.attributes.position.needsUpdate = true;
            }
        }

renderer.setRenderTarget(trailTexture);
        renderer.render(scene, camera);
        renderer.setRenderTarget(null);

controls.update();
        composer.render();
    }
</script>

Recommandé

Chargeur WebGL Tattletail Unity avec barre de progression

Page de destination de React Netflix

Pied de page d'attribution CSS : Fixe, Centré, Transparent

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS