Morphing Particles with Three.js

Open In Editor Video Publish Your Code

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

Morphing Particles with Three.js

Recommended

HTML TV Screen with YouTube Embed & Effects

CSS Animation: Loading Blob with Pulse

Bottom Icon Navigation Bar with Tailwind CSS

HTML

CSS

JS

Recommended

HTML TV Screen with YouTube Embed & Effects

CSS Animation: Loading Blob with Pulse

Bottom Icon Navigation Bar with Tailwind CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS