Morphing Particles with Three.js

Open In Editor 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 Message Bubble with SVG Design

CodePen Home ThreeJS 'Portal Planes' with Matcaps

HTML

CSS

JS

Recommended

HTML Message Bubble with SVG Design

CodePen Home ThreeJS 'Portal Planes' with Matcaps

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS