Efecto de transformación de forma del sistema de partículas Three.js

1169 zegarkidawida

Abrir en el editor Publica tu código

Efecto de transformación de forma del sistema de partículas Three.js

Recomendado

28 June 2025

Plantilla HTML de página de error 404

11 August 2025

Colección de animaciones circulares CSS

14 October 2024

Formulario de registro

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>

Recomendado

Plantilla HTML de página de error 404

Colección de animaciones circulares CSS

Formulario de registro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS