Three.js Trasformazione della forma delle particelle con controlli

1501 alex01001010

Apri nell'Editor Video Pubblica il Tuo Codice

Three.js Trasformazione della forma delle particelle con controlli

Consigliato

23 August 2025

Soluzioni di rete IT | Sicurezza informatica - NetMasters

25 November 2025

Combattente con il bastone

12 December 2025

Gioco di ping pong retrò JavaScript con round speciali

HTML

#container {
        width: 100%;
        height: 100%;
        position: relative;
    }

#ui {
        position: absolute;
        top: 20px;
        right: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        color: white;
        z-index: 1000;
    }

#controls {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white;
        z-index: 1000;
    }

.control-group {
        background: rgba(0, 0, 0, 0.6);
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 15px;
    }

.slider-container {
        margin: 10px 0;
    }

.slider-container label {
        display: block;
        margin-bottom: 5px;
        font-size: 14px;
    }

input[type="range"] {
        width: 200px;
        margin-right: 10px;
    }

input[type="color"] {
        width: 50px;
        height: 25px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

#ui > * {
        margin-bottom: 10px;
    }

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

Three.js Trasformazione della forma delle particelle con controlli

Consigliato

Soluzioni di rete IT | Sicurezza informatica - NetMasters

Combattente con il bastone

Gioco di ping pong retrò JavaScript con round speciali

HTML

CSS

JS

Consigliato

Soluzioni di rete IT | Sicurezza informatica - NetMasters

Combattente con il bastone

Gioco di ping pong retrò JavaScript con round speciali

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS