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

282 zegarkidawida

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

24 August 2025

Curseur accordéon HTML des spécifications de la voiture

22 June 2025

Modèle HTML de tableau de bord d'administration

21 July 2025

Formulaire de connexion HTML avec arrière-plan géométrique

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>

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

Recommandé

Curseur accordéon HTML des spécifications de la voiture

Modèle HTML de tableau de bord d'administration

Formulaire de connexion HTML avec arrière-plan géométrique

HTML

CSS

JS

Recommandé

Curseur accordéon HTML des spécifications de la voiture

Modèle HTML de tableau de bord d'administration

Formulaire de connexion HTML avec arrière-plan géométrique

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS