Efeito de transformação de forma do sistema de partículas Three.js

Abrir no Editor Publique Seu Código

Recomendado

12 April 2025

Transformação de formas de partículas Three.js com controles

31 May 2025

<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>

Efeito de transformação de forma do sistema de partículas Three.js

Recomendado

Um Código de Dossousandrin

Transformação de formas de partículas Three.js com controles

Formulário de login futurista

HTML

CSS

JS

Recomendado

Um Código de Dossousandrin

Transformação de formas de partículas Three.js com controles

Formulário de login futurista

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS