Three.js 着色器驱动的 3D Vortex

<style>    * {        margin: 0;        padding: 0;        overflow: hidden;        background-color: #000;    }    canvas {        width: 100%;        height: 100vh;        display: block;        position: fixed;        top: 50%;        left: 50%;        transform: translate(-50%, -50%);    }</style>
<script type="importmap">{    "imports": {        "three": "https://unpkg.com/three@0.162.0/build/three.module.js",        "three/addons/controls/OrbitControls.js": "https://unpkg.com/three@0.162.0/examples/jsm/controls/OrbitControls.js",        "three/addons/postprocessing/EffectComposer.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/EffectComposer.js",        "three/addons/postprocessing/RenderPass.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/RenderPass.js",        "three/addons/postprocessing/UnrealBloomPass.js": "https://unpkg.com/three@0.162.0/examples/jsm/postprocessing/UnrealBloomPass.js"    }}</script>
<script type="module">import * as THREE from 'three';import { OrbitControls } from 'three/addons/controls/OrbitControls.js';import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(window.devicePixelRatio);document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.05;camera.position.set(0, 5, 20);controls.update();
const nebulaGeometry = new THREE.SphereGeometry(100, 64, 64);const nebulaMaterial = new THREE.ShaderMaterial({    uniforms: {        time: { value: 0 }    },    vertexShader: `        varying vec3 vPosition;        void main() {            vPosition = position;            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);        }    `,    fragmentShader: `        uniform float time;        varying vec3 vPosition;        float noise(vec3 p) {            return fract(sin(dot(p, vec3(127.1, 311.7, 74.7))) * 43758.5453);        }        void main() {            vec3 p = normalize(vPosition) * 10.0;            float n = noise(p + vec3(time * 0.1));            vec3 color = mix(vec3(0.2, 0.1, 0.4), vec3(0.1, 0.4, 0.3), n);            float glow = pow(1.0 - length(vPosition) / 100.0, 2.0);            gl_FragColor = vec4(color * glow, 0.3);        }    `,    side: THREE.BackSide,    transparent: true,    blending: THREE.AdditiveBlending});const nebula = new THREE.Mesh(nebulaGeometry, nebulaMaterial);scene.add(nebula);
const torusGeometry = new THREE.TorusGeometry(6, 1.5, 32, 100);const torusMaterial = new THREE.ShaderMaterial({    uniforms: {        time: { value: 0 }    },    vertexShader: `        varying vec3 vNormal;        varying vec3 vPosition;        uniform float time;        void main() {            vNormal = normal;            vPosition = position;            vec3 pos = position;            pos *= 1.0 + sin(time * 2.0 + length(position)) * 0.15;            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);        }    `,    fragmentShader: `        uniform float time;        varying vec3 vNormal;        varying vec3 vPosition;        void main() {            float glow = sin(time * 2.5 + vPosition.x * 1.5) * 0.5 + 0.5;            vec3 baseColor = vec3(1.0, 0.2, 0.8);            vec3 pulseColor = vec3(0.4, 0.1, 1.0);            vec3 color = mix(baseColor, pulseColor, glow);            float edge = smoothstep(0.4, 0.6, abs(vNormal.z));            gl_FragColor = vec4(color * edge, 1.0);        }    `,    side: THREE.DoubleSide});const torusCore = new THREE.Mesh(torusGeometry, torusMaterial);scene.add(torusCore);
const innerSphereGeometry = new THREE.SphereGeometry(2, 32, 32);const innerSphereMaterial = new THREE.ShaderMaterial({    uniforms: {        time: { value: 0 }    },    vertexShader: `        varying vec3 vNormal;        varying vec2 vUv;        void main() {            vNormal = normal;            vUv = uv;            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);        }    `,    fragmentShader: `        uniform float time;        varying vec3 vNormal;        varying vec2 vUv;
        void main() {            vec2 uv = vUv;            float t = time * 2.0;
            float pattern = sin(uv.x * 20.0 + t) * sin(uv.y * 20.0 - t);            pattern += sin(uv.x * 15.0 - t * 1.5) * sin(uv.y * 15.0 + t * 1.5) * 0.5;
            float fresnel = pow(1.0 - abs(dot(vNormal, vec3(0.0, 0.0, 1.0))), 2.0);
            vec3 baseColor = vec3(0.4, 0.1, 1.0);            vec3 glowColor = vec3(1.0, 0.2, 0.8);            vec3 finalColor = mix(baseColor, glowColor, pattern);
            float alpha = (pattern * 0.5 + fresnel * 0.7) * 0.8;            gl_FragColor = vec4(finalColor, alpha);        }    `,    transparent: true,    blending: THREE.AdditiveBlending});const innerSphere = new THREE.Mesh(innerSphereGeometry, innerSphereMaterial);scene.add(innerSphere);
const sphereCount = 12;const spheres = [];const trails = [];const sphereGeometry = new THREE.SphereGeometry(0.8, 32, 32);const sphereMaterial = new THREE.ShaderMaterial({    uniforms: {        time: { value: 0 }    },    vertexShader: `        varying vec3 vPosition;        void main() {            vPosition = position;            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);        }    `,    fragmentShader: `        uniform float time;        varying vec3 vPosition;        void main() {            float pulse = sin(time * 4.0 + vPosition.y * 2.0) * 0.5 + 0.5;            vec3 color = vec3(0.1, 0.8, 0.2) * (pulse * 0.9 + 0.4);            float edge = smoothstep(0.3, 0.5, length(vPosition) / 0.8);            gl_FragColor = vec4(color * edge, 0.9);        }    `,    transparent: true,    blending: THREE.AdditiveBlending});
for (let i = 0; i < sphereCount; i++) {    const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);    const trailGeometry = new THREE.BufferGeometry();    const trailPositions = new Float32Array(100 * 3);    const trailMaterial = new THREE.LineBasicMaterial({         color: 0x33ff66,         transparent: true,         opacity: 0.3,        blending: THREE.AdditiveBlending     });    const trail = new THREE.Line(trailGeometry, trailMaterial);
    sphere.userData = {        orbitAngle: Math.random() * Math.PI * 2,        orbitSpeed: 0.05 + Math.random() * 0.03,        orbitRadiusX: 10 + Math.random() * 4,        orbitRadiusZ: 8 + Math.random() * 3,        trailPositions: trailPositions,        trailIndex: 0    };    spheres.push(sphere);    trails.push(trail);    scene.add(sphere);    scene.add(trail);}
const vortexCount = 600;const vortices = new THREE.Group();const vortexGeometry = new THREE.BufferGeometry();const vortexPositions = new Float32Array(vortexCount * 3);const vortexColors = new Float32Array(vortexCount * 3);const vortexSizes = new Float32Array(vortexCount);for (let i = 0; i < vortexCount; i++) {    vortexPositions[i * 3] = 0;    vortexPositions[i * 3 + 1] = 0;    vortexPositions[i * 3 + 2] = 0;    const color = new THREE.Color().setHSL(Math.random(), 0.7, 0.6);    vortexColors[i * 3] = color.r;    vortexColors[i * 3 + 1] = color.g;    vortexColors[i * 3 + 2] = color.b;    vortexSizes[i] = 0.3 + Math.random() * 0.2;}vortexGeometry.setAttribute('position', new THREE.BufferAttribute(vortexPositions, 3));vortexGeometry.setAttribute('customColor', new THREE.BufferAttribute(vortexColors, 3));vortexGeometry.setAttribute('size', new THREE.BufferAttribute(vortexSizes, 1));const vortexMaterial = new THREE.ShaderMaterial({    uniforms: {        time: { value: 0 }    },    vertexShader: `        attribute vec3 customColor;        attribute float size;        varying vec3 vColor;        varying float vAlpha;        void main() {            vColor = customColor;            vAlpha = 1.0 - length(position) / 20.0;            gl_PointSize = size * (400.0 / -modelViewMatrix[3][2]);            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);        }    `,    fragmentShader: `        uniform float time;        varying vec3 vColor;        varying float vAlpha;        void main() {            vec2 uv = gl_PointCoord - 0.5;            float dist = length(uv);            if (dist > 0.5) discard;            float shimmer = sin(time * 8.0 + dist * 15.0) * 0.3 + 0.7;            float glow = exp(-dist * 5.0);            gl_FragColor = vec4(vColor * shimmer, glow * vAlpha * 0.8);        }    `,    transparent: true,    blending: THREE.AdditiveBlending});const vortexSystem = new THREE.Points(vortexGeometry, vortexMaterial);vortices.add(vortexSystem);scene.add(vortices);
const vortexData = Array(vortexCount).fill().map(() => ({    angle: Math.random() * Math.PI * 2,    speed: 0.06 + Math.random() * 0.04,    distance: 0,    maxDistance: 15 + Math.random() * 5,    twist: 0.4 + Math.random() * 0.3}));
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);scene.add(ambientLight);const pointLight1 = new THREE.PointLight(0xffe6ff, 2.0, 100);pointLight1.position.set(15, 15, 15);scene.add(pointLight1);const pointLight2 = new THREE.PointLight(0xe6ffec, 1.6, 100);pointLight2.position.set(-15, -15, -15);scene.add(pointLight2);const pointLight3 = new THREE.PointLight(0xe6f0ff, 1.2, 100);pointLight3.position.set(0, 20, -10);scene.add(pointLight3);
const composer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight), 1.4, 0.6, 0.85);bloomPass.threshold = 0.2;bloomPass.strength = 1.6;bloomPass.radius = 0.6;composer.addPass(bloomPass);
let time = 0;function animate() {    requestAnimationFrame(animate);    time += 0.01;
    nebulaMaterial.uniforms.time.value = time;
    torusCore.rotation.y += 0.005;    torusCore.rotation.z += 0.003;    torusMaterial.uniforms.time.value = time;
    innerSphereMaterial.uniforms.time.value = time;
    spheres.forEach((sphere, i) => {        const data = sphere.userData;        data.orbitAngle += data.orbitSpeed;        sphere.position.x = Math.cos(data.orbitAngle) * data.orbitRadiusX;        sphere.position.z = Math.sin(data.orbitAngle) * data.orbitRadiusZ;        sphere.position.y = Math.sin(data.orbitAngle * 1.5 + time) * 3;        sphere.material.uniforms.time.value = time;
        const trail = trails[i];        const pos = data.trailPositions;        const idx = data.trailIndex * 3;        pos[idx] = sphere.position.x;        pos[idx + 1] = sphere.position.y;        pos[idx + 2] = sphere.position.z;        data.trailIndex = (data.trailIndex + 1) % 100;        trail.geometry.setAttribute('position', new THREE.BufferAttribute(pos, 3));        trail.geometry.attributes.position.needsUpdate = true;    });
    const vortexPosArray = vortexSystem.geometry.attributes.position.array;    for (let i = 0; i < vortexCount; i++) {        const data = vortexData[i];        data.distance += data.speed;        const angle = data.angle + time * data.twist;        vortexPosArray[i * 3] = Math.cos(angle) * data.distance * (1.0 + data.twist);        vortexPosArray[i * 3 + 1] = Math.sin(angle) * data.distance * 0.6;        vortexPosArray[i * 3 + 2] = Math.sin(angle + data.twist) * data.distance;        if (data.distance > data.maxDistance) {            data.distance = 0;        }    }    vortexSystem.geometry.attributes.position.needsUpdate = true;    vortexMaterial.uniforms.time.value = time;
    controls.update();    composer.render();}
animate();
window.addEventListener('resize', () => {    camera.aspect = window.innerWidth / window.innerHeight;    camera.updateProjectionMatrix();    renderer.setSize(window.innerWidth, window.innerHeight);    composer.setSize(window.innerWidth, window.innerHeight);});</script>