Effet de morphing de forme du système de particules Three.js

2,299 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

Effet de morphing de forme du système de particules Three.js

Recommandé

23 November 2024

Animation du survol

15 October 2025

Code HTML JavaScript du jeu de devinettes

5 June 2024

Page de connexion 3D

HTML

<div id="loading">
        <span>Initializing Particles...</span>
        <div id="progress-container">
             <div id="progress"></div>
        </div>
    </div>

<div id="ui">
        <div id="info">Shape: Sphere (Click to morph)</div>
    </div>

<div id="controls">
        <button id="shape-btn">Change Shape</button>

let scene, camera, renderer, controls, clock;
        let composer, bloomPass;

let particlesGeometry, particlesMaterial, particleSystem;
        let currentPositions, sourcePositions, targetPositions, swarmPositions; 
        let particleSizes, particleOpacities, particleEffectStrengths; 
        let noise3D, noise4D;

let morphTimeline = null; 
        let isInitialized = false;
        let isMorphing = false;

const CONFIG = {
            particleCount: 15000,
            shapeSize: 14,
            swarmDistanceFactor: 1.5,
            swirlFactor: 4.0,
            noiseFrequency: 0.1,
            noiseTimeScale: 0.04,
            noiseMaxStrength: 2.8,
            colorScheme: 'fire',
            morphDuration: 4000,
            particleSizeRange: [0.08, 0.25],
            starCount: 18000,
            bloomStrength: 1.3,
            bloomRadius: 0.5,
            bloomThreshold: 0.05,
            idleFlowStrength: 0.25,
            idleFlowSpeed: 0.08,
            idleRotationSpeed: 0.02,
            morphSizeFactor: 0.5, 
            morphBrightnessFactor: 0.6 
        };

const SHAPES = [
            { name: 'Sphere', generator: generateSphere },
            { name: 'Cube', generator: generateCube },
            { name: 'Pyramid', generator: generatePyramid },
            { name: 'Torus', generator: generateTorus },
            { name: 'Galaxy', generator: generateGalaxy },
            { name: 'Wave', generator: generateWave }
        ];
        let currentShapeIndex = 0;

const morphState = { progress: 0.0 };

const COLOR_SCHEMES = {
            fire: { startHue: 0, endHue: 45, saturation: 0.95, lightness: 0.6 },
            neon: { startHue: 300, endHue: 180, saturation: 1.0, lightness: 0.65 },
            nature: { startHue: 90, endHue: 160, saturation: 0.85, lightness: 0.55 },
            rainbow: { startHue: 0, endHue: 360, saturation: 0.9, lightness: 0.6 }
        };

const tempVec = new THREE.Vector3();
        const sourceVec = new THREE.Vector3();
        const targetVec = new THREE.Vector3();
        const swarmVec = new THREE.Vector3();
        const noiseOffset = new THREE.Vector3();
        const flowVec = new THREE.Vector3();
        const bezPos = new THREE.Vector3();
        const swirlAxis = new THREE.Vector3();
        const currentVec = new THREE.Vector3();

clock = new THREE.Clock();
            noise3D = createNoise3D(() => Math.random());
            noise4D = createNoise4D(() => Math.random());
            scene = new THREE.Scene();
            scene.fog = new THREE.FogExp2(0x000308, 0.03);
            updateProgress(5);

camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 8, 28); 
            camera.lookAt(scene.position);
            updateProgress(5);

const canvas = document.getElementById('webglCanvas');
            renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true, powerPreference: 'high-performance' });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
            renderer.toneMapping = THREE.ACESFilmicToneMapping;
            renderer.toneMappingExposure = 1.1;
            updateProgress(10);

controls = new OrbitControls(camera, renderer.domElement);
            controls.enableDamping = true; controls.dampingFactor = 0.05;
            controls.minDistance = 5; controls.maxDistance = 80;
            controls.autoRotate = true; controls.autoRotateSpeed = 0.3;
            updateProgress(5);

scene.add(new THREE.AmbientLight(0x404060));
            const dirLight1 = new THREE.DirectionalLight(0xffffff, 1.5);
            dirLight1.position.set(15, 20, 10); scene.add(dirLight1);
            const dirLight2 = new THREE.DirectionalLight(0x88aaff, 0.9);
            dirLight2.position.set(-15, -10, -15); scene.add(dirLight2);
            updateProgress(10);

setupPostProcessing(); updateProgress(10);
            createStarfield(); updateProgress(15);
            setupParticleSystem(); updateProgress(25);

isInitialized = true;
            animate();
            console.log("Initialization complete.");
        }

function setupPostProcessing() {
            composer = new EffectComposer(renderer);
            composer.addPass(new RenderPass(scene, camera));
            bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), CONFIG.bloomStrength, CONFIG.bloomRadius, CONFIG.bloomThreshold);
            composer.addPass(bloomPass);
        }

function createStarTexture() {
            const size = 64; const canvas = document.createElement('canvas');
            canvas.width = size; canvas.height = size; const context = canvas.getContext('2d');
            const gradient = context.createRadialGradient(size / 2, size / 2, 0, size / 2, size / 2, size / 2);
            gradient.addColorStop(0, 'rgba(255,255,255,1)'); gradient.addColorStop(0.2, 'rgba(255,255,255,0.8)');
            gradient.addColorStop(0.5, 'rgba(255,255,255,0.3)'); gradient.addColorStop(1, 'rgba(255,255,255,0)');
            context.fillStyle = gradient; context.fillRect(0, 0, size, size);
            return new THREE.CanvasTexture(canvas);
        }

function setupParticleSystem() {
            targetPositions = SHAPES.map(shape => shape.generator(CONFIG.particleCount, CONFIG.shapeSize));
            particlesGeometry = new THREE.BufferGeometry();

currentPositions = new Float32Array(targetPositions[0]);
            sourcePositions = new Float32Array(targetPositions[0]);
            swarmPositions = new Float32Array(CONFIG.particleCount * 3);
            particlesGeometry.setAttribute('position', new THREE.BufferAttribute(currentPositions, 3));

particleSizes = new Float32Array(CONFIG.particleCount);
            particleOpacities = new Float32Array(CONFIG.particleCount);
            particleEffectStrengths = new Float32Array(CONFIG.particleCount);
            for (let i = 0; i < CONFIG.particleCount; i++) {
                particleSizes[i] = THREE.MathUtils.randFloat(CONFIG.particleSizeRange[0], CONFIG.particleSizeRange[1]);
                particleOpacities[i] = 1.0;
                particleEffectStrengths[i] = 0.0;
            }
            particlesGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1));
            particlesGeometry.setAttribute('opacity', new THREE.BufferAttribute(particleOpacities, 1));
            particlesGeometry.setAttribute('aEffectStrength', new THREE.BufferAttribute(particleEffectStrengths, 1));

const colors = new Float32Array(CONFIG.particleCount * 3);
            updateColorArray(colors, currentPositions);
            particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));

particlesMaterial = new THREE.ShaderMaterial({
                 uniforms: {
                      pointTexture: { value: createStarTexture() }
                 },
                 vertexShader: `
                      attribute float size;
                      attribute float opacity;
                      attribute float aEffectStrength;
                      varying vec3 vColor;
                      varying float vOpacity;
                      varying float vEffectStrength;

void main() {
                           vColor = color;
                           vOpacity = opacity;
                           vEffectStrength = aEffectStrength;

vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);

float sizeScale = 1.0 - vEffectStrength * ${CONFIG.morphSizeFactor.toFixed(2)};
                           gl_PointSize = size * sizeScale * (400.0 / -mvPosition.z);

gl_Position = projectionMatrix * mvPosition;
                      }
                 `,
                 fragmentShader: `
                      uniform sampler2D pointTexture;
                      varying vec3 vColor;
                      varying float vOpacity;
                      varying float vEffectStrength;

void main() {
                           float alpha = texture2D(pointTexture, gl_PointCoord).a;
                           if (alpha < 0.05) discard;

vec3 finalColor = vColor * (1.0 + vEffectStrength * ${CONFIG.morphBrightnessFactor.toFixed(2)});

gl_FragColor = vec4(finalColor, alpha * vOpacity);
                      }
                 `,
                 blending: THREE.AdditiveBlending,
                 depthTest: true,
                 depthWrite: false,
                 transparent: true,
                 vertexColors: true
            });

particleSystem = new THREE.Points(particlesGeometry, particlesMaterial);
            scene.add(particleSystem);
        }

function updateColors() {
            const colors = particlesGeometry.attributes.color.array;
            updateColorArray(colors, particlesGeometry.attributes.position.array);
            particlesGeometry.attributes.color.needsUpdate = true;
        }

function animate() {
            requestAnimationFrame(animate);
            if (!isInitialized) return;
            const elapsedTime = clock.getElapsedTime();
            const deltaTime = clock.getDelta();
            controls.update();
            const positions = particlesGeometry.attributes.position.array;
            const effectStrengths = particlesGeometry.attributes.aEffectStrength.array;

if (isMorphing) {
                updateMorphAnimation(positions, effectStrengths, elapsedTime, deltaTime);
            } else {
                updateIdleAnimation(positions, effectStrengths, elapsedTime, deltaTime);
            }
            particlesGeometry.attributes.position.needsUpdate = true;
            if (isMorphing || particlesGeometry.attributes.aEffectStrength.needsUpdate) {
                 particlesGeometry.attributes.aEffectStrength.needsUpdate = true;
            }
            composer.render(deltaTime);
        }

function updateMorphAnimation(positions, effectStrengths, elapsedTime, deltaTime) {
            const t = morphState.progress;
            const targets = targetPositions[currentShapeIndex];
            const effectStrength = Math.sin(t * Math.PI);
            const currentSwirl = effectStrength * CONFIG.swirlFactor * deltaTime * 50;
            const currentNoise = effectStrength * CONFIG.noiseMaxStrength;

for (let i = 0; i < CONFIG.particleCount; i++) {
                const i3 = i * 3;
                sourceVec.fromArray(sourcePositions, i3);
                swarmVec.fromArray(swarmPositions, i3);
                targetVec.fromArray(targets, i3);

const t_inv = 1.0 - t; const t_inv_sq = t_inv * t_inv; const t_sq = t * t;
                bezPos.copy(sourceVec).multiplyScalar(t_inv_sq);
                bezPos.addScaledVector(swarmVec, 2.0 * t_inv * t);
                bezPos.addScaledVector(targetVec, t_sq);

if (currentSwirl > 0.01) {
                    tempVec.subVectors(bezPos, sourceVec);
                    swirlAxis.set( noise3D(i * 0.02, elapsedTime * 0.1, 0), noise3D(0, i * 0.02, elapsedTime * 0.1 + 5), noise3D(elapsedTime * 0.1 + 10, 0, i * 0.02) ).normalize();
                    tempVec.applyAxisAngle(swirlAxis, currentSwirl * (0.5 + Math.random() * 0.5));
                    bezPos.copy(sourceVec).add(tempVec);
                }

if (currentNoise > 0.01) {
                    const noiseTime = elapsedTime * CONFIG.noiseTimeScale;
                    noiseOffset.set( noise4D(bezPos.x * CONFIG.noiseFrequency, bezPos.y * CONFIG.noiseFrequency, bezPos.z * CONFIG.noiseFrequency, noiseTime), noise4D(bezPos.x * CONFIG.noiseFrequency + 100, bezPos.y * CONFIG.noiseFrequency + 100, bezPos.z * CONFIG.noiseFrequency + 100, noiseTime), noise4D(bezPos.x * CONFIG.noiseFrequency + 200, bezPos.y * CONFIG.noiseFrequency + 200, bezPos.z * CONFIG.noiseFrequency + 200, noiseTime) );
                    bezPos.addScaledVector(noiseOffset, currentNoise);
                }

positions[i3] = bezPos.x;
                positions[i3 + 1] = bezPos.y;
                positions[i3 + 2] = bezPos.z;

effectStrengths[i] = effectStrength;
            }
             particlesGeometry.attributes.aEffectStrength.needsUpdate = true;
        }

function updateIdleAnimation(positions, effectStrengths, elapsedTime, deltaTime) {
            const breathScale = 1.0 + Math.sin(elapsedTime * 0.5) * 0.015;
            const timeScaled = elapsedTime * CONFIG.idleFlowSpeed;
            const freq = 0.1;

let needsEffectStrengthReset = false;

for (let i = 0; i < CONFIG.particleCount; i++) {
                const i3 = i * 3;
                sourceVec.fromArray(sourcePositions, i3);
                tempVec.copy(sourceVec).multiplyScalar(breathScale);
                flowVec.set( noise4D(tempVec.x * freq, tempVec.y * freq, tempVec.z * freq, timeScaled), noise4D(tempVec.x * freq + 10, tempVec.y * freq + 10, tempVec.z * freq + 10, timeScaled), noise4D(tempVec.x * freq + 20, tempVec.y * freq + 20, tempVec.z * freq + 20, timeScaled) );
                tempVec.addScaledVector(flowVec, CONFIG.idleFlowStrength);
                currentVec.fromArray(positions, i3);
                currentVec.lerp(tempVec, 0.05);
                positions[i3] = currentVec.x;
                positions[i3 + 1] = currentVec.y;
                positions[i3 + 2] = currentVec.z;

if (effectStrengths[i] !== 0.0) {
                    effectStrengths[i] = 0.0;
                    needsEffectStrengthReset = true;
                }
            }
             if (needsEffectStrengthReset) {
                 particlesGeometry.attributes.aEffectStrength.needsUpdate = true;
             }
        }

function onCanvasClick(event) {
            if (event.target.closest('#controls')) { return; }
            triggerMorph();
        }

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

init();

</script>

CSS