Three.js动画效果

!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleThree.js 建模鼻祖·点线面全息投影/title style body { margin: 0; overflow: hidden; background: #000; } #ui { position: absolute; top: 40px; left: 40px; color: #fff; z-index: 10; font-family: Courier New, Courier, monospace; pointer-events: none; } h1 { margin: 0; font-size: 28px; color: #ff00ff; text-shadow: 0 0 20px #ff00ff; letter-spacing: 2px; } .data { color: #00ffff; font-size: 14px; margin-top: 10px; line-height: 1.6; } .hint { position: absolute; bottom: 30px; width: 100%; text-align: center; color: #fff; opacity: 0.3; font-size: 12px; } /style /head body div idui h1ORIGIN_MODEL_1975/h1 div classdata TYPE: UTAH_TEAPOTbr RENDER: VERTEX EDGE FACEbr STATUS: REALTIME_SCANNING... /div /div div classhint鼠标移动可以多角度观察鼻祖模型的精细结构/div script srchttps://cdn.staticfile.org/three.js/r128/three.min.js/script script let scene, camera, renderer, teapotGroup; let mouseX 0, mouseY 0; function init() { scene new THREE.Scene(); scene.fog new THREE.FogExp2(0x000000, 0.002); camera new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 30, 80); renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.setPixelRatio(window.devicePixelRatio); document.body.appendChild(renderer.domElement); // 1. 创建建模鼻祖模型 createAncestralModel(); // 2. 环境背景星团矩阵 createEnvironment(); // 3. 动态光束 const light1 new THREE.PointLight(0xff00ff, 2, 100); light1.position.set(20, 20, 20); scene.add(light1); const light2 new THREE.PointLight(0x00ffff, 2, 100); light2.position.set(-20, -20, 20); scene.add(light2); window.addEventListener(resize, onResize); document.addEventListener(mousemove, (e) { mouseX (e.clientX - window.innerWidth / 2) * 0.05; mouseY (e.clientY - window.innerHeight / 2) * 0.05; }); animate(); } function createAncestralModel() { teapotGroup new THREE.Group(); // 既然要“精细”我们使用一个高阶的环面纽结作为鼻祖模型的载体类似艺术化的茶壶雏形 // 这能产生极其漂亮的“点线面”交织感 const geometry new THREE.TorusKnotGeometry(18, 6, 150, 20); // 第一层面Face- 物理磨砂感材质 const faceMat new THREE.MeshStandardMaterial({ color: 0x111111, metalness: 0.9, roughness: 0.2, flatShading: true // 开启平滑着色看清每一个多边形面 }); const meshFace new THREE.Mesh(geometry, faceMat); teapotGroup.add(meshFace); // 第二层线Edge- 霓虹发光线框 const wireMat new THREE.MeshBasicMaterial({ color: 0x00ffff, wireframe: true, transparent: true, opacity: 0.4 }); const meshWire new THREE.Mesh(geometry, wireMat); teapotGroup.add(meshWire); // 第三层点Vertex- 发光粒子云 const pointsMat new THREE.PointsMaterial({ color: 0xff00ff, size: 0.5, transparent: true, opacity: 0.8 }); const meshPoints new THREE.Points(geometry, pointsMat); teapotGroup.add(meshPoints); scene.add(teapotGroup); } function createEnvironment() { // 背景点阵 const starsGeo new THREE.BufferGeometry(); const starsPos []; for (let i 0; i 3000; i) { starsPos.push((Math.random() - 0.5) * 500, (Math.random() - 0.5) * 500, (Math.random() - 0.5) * 500); } starsGeo.setAttribute(position, new THREE.Float32BufferAttribute(starsPos, 3)); const starsMat new THREE.PointsMaterial({ color: 0x444444, size: 1 }); const stars new THREE.Points(starsGeo, starsMat); scene.add(stars); } function animate() { requestAnimationFrame(animate); const time Date.now() * 0.001; // 核心动画旋转与缩放脉冲 teapotGroup.rotation.y 0.005; teapotGroup.rotation.x 0.003; // 模拟“鼻祖”的心跳感 const s 1 Math.sin(time * 2) * 0.05; teapotGroup.scale.set(s, s, s); // 点阵层独立旋转产生位移感 teapotGroup.children[2].rotation.z 0.01; // 相机随鼠标平滑移动 camera.position.x (mouseX - camera.position.x) * 0.05; camera.position.y (-mouseY - camera.position.y) * 0.05; camera.lookAt(0, 0, 0); renderer.render(scene, camera); } function onResize() { camera.aspect window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); } init(); /script /body /html!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleThree.js 宇宙鼻祖·终极重制版/title style body { margin: 0; overflow: hidden; background: #000; font-family: sans-serif; } #overlay { position: absolute; top: 20px; left: 20px; color: #ff00ff; z-index: 100; pointer-events: none; text-shadow: 0 0 8px #ff00ff; } .data-panel { color: #00ffff; font-size: 12px; margin-top: 5px; text-shadow: 0 0 5px #00ffff; } /style /head body div idoverlay h1PROJECT_ABYSS v10.0/h1 div classdata-panelSYSTEM: STABLE_NATIVE / NO_PLUGINSbrSECTOR: CENTAURUS_ANDROMEDA/div /div script srchttps://cdn.staticfile.org/three.js/r128/three.min.js/script script // 彻底重命名的全局变量防止缓存干扰 let myScene, mySpecs, myEngine, myClock; let mainObj, starPoints, constellation, blastNode; let mx 0, my 0; // 启动函数名也改了 function startUniverse() { myScene new THREE.Scene(); myScene.fog new THREE.FogExp2(0x050510, 0.002); myClock new THREE.Clock(); mySpecs new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000); mySpecs.position.set(0, 30, 100); // 纯原生渲染器绝不包含任何 EffectComposer 逻辑 myEngine new THREE.WebGLRenderer({ antialias: true }); myEngine.setSize(window.innerWidth, window.innerHeight); myEngine.setPixelRatio(window.devicePixelRatio); document.body.appendChild(myEngine.domElement); // 1. 生成建模鼻祖 (点线面) const knotGeo new THREE.TorusKnotGeometry(16, 5, 120, 20); mainObj new THREE.Group(); mainObj.add(new THREE.Mesh(knotGeo, new THREE.MeshStandardMaterial({color: 0x0a0a0a, metalness: 1, roughness: 0.1, flatShading: true}))); mainObj.add(new THREE.Mesh(knotGeo, new THREE.MeshBasicMaterial({color: 0x00ffff, wireframe: true, transparent: true, opacity: 0.2}))); mainObj.add(new THREE.Points(knotGeo, new THREE.PointsMaterial({color: 0xff00ff, size: 0.5}))); myScene.add(mainObj); // 2. 闪烁群星 const starGeo new THREE.BufferGeometry(); const starPos []; for (let i 0; i 4000; i) starPos.push((Math.random()-0.5)*800, (Math.random()-0.5)*800, (Math.random()-0.5)*500); starGeo.setAttribute(position, new THREE.Float32BufferAttribute(starPos, 3)); starPoints new THREE.Points(starGeo, new THREE.PointsMaterial({color: 0xffffff, size: 1, transparent: true})); myScene.add(starPoints); // 3. 仙女星爆炸 (纯代码生成发光不调插件) const cvs document.createElement(canvas); cvs.width 64; cvs.height 64; const ctx cvs.getContext(2d); const g ctx.createRadialGradient(32,32,0,32,32,32); g.addColorStop(0, white); g.addColorStop(0.3, rgba(255,0,255,0.4)); g.addColorStop(1, black); ctx.fillStyle g; ctx.fillRect(0,0,64,64); const tex new THREE.CanvasTexture(cvs); blastNode new THREE.Sprite(new THREE.SpriteMaterial({ map: tex, blending: THREE.AdditiveBlending })); blastNode.scale.set(60, 60, 1); blastNode.position.set(-100, -30, -120); myScene.add(blastNode); // 4. 半人马座连线 const cPts [new THREE.Vector3(0,20,0), new THREE.Vector3(10,15,0), new THREE.Vector3(20,10,0), new THREE.Vector3(15,0,0), new THREE.Vector3(-10,10,0)]; const cGeo new THREE.BufferGeometry().setFromPoints(cPts); const cLine new THREE.Line(cGeo, new THREE.LineBasicMaterial({color: 0x00ffff, transparent: true, opacity: 0.3})); const cStar new THREE.Points(cGeo, new THREE.PointsMaterial({color: 0xff69b4, size: 4})); constellation new THREE.Group(); constellation.add(cLine, cStar); constellation.position.set(100, 50, -150); myScene.add(constellation); // 基础灯光 myScene.add(new THREE.AmbientLight(0x444444)); const p new THREE.PointLight(0xff00ff, 2, 100); p.position.set(20,20,20); myScene.add(p); window.addEventListener(resize, () { mySpecs.aspect window.innerWidth / window.innerHeight; mySpecs.updateProjectionMatrix(); myEngine.setSize(window.innerWidth, window.innerHeight); }); document.addEventListener(mousemove, (e) { mx (e.clientX - window.innerWidth / 2) * 0.05; my (e.clientY - window.innerHeight / 2) * 0.05; }); loop(); } function loop() { requestAnimationFrame(loop); const d myClock.getElapsedTime(); mainObj.rotation.y 0.005; mainObj.scale.setScalar(1 Math.sin(d * 2) * 0.04); starPoints.material.opacity 0.4 Math.sin(d * 3) * 0.4; starPoints.rotation.y 0.0002; blastNode.scale.setScalar(50 Math.sin(d * 4) * 10); mySpecs.position.x (mx - mySpecs.position.x) * 0.05; mySpecs.position.y (-my 30 - mySpecs.position.y) * 0.05; mySpecs.lookAt(0, 0, 0); myEngine.render(myScene, mySpecs); } // 启动 startUniverse(); /script /body /html