Three.js 科技粒子教程

科技粒子 ·Technology· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么onBeforeCompile 注入 GLSL 改造内置材质OrbitControls 相机轨道交互THREE.Points 粒子点渲染BufferGeometry 自定义顶点/索引数据requestAnimationFrame渲染循环与resize自适应效果说明本案例演示科技粒子效果基于 WebGL 实现「科技粒子」可视化效果附完整可运行源码核心用到 onBeforeCompile、OrbitControls、THREE.Points。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。onBeforeCompile在 Three 拼好内置 shader 后替换#include片段适合在 PBR 材质上叠加大屏特效。OrbitControls提供轨道旋转/缩放开启enableDamping后需在 animate 中controls.update()。THREE.Points将每个顶点渲染为可控大小的粒子可用自定义 attribute如u_index驱动片元/顶点动画。实现步骤搭建 Scene、PerspectiveCamera、WebGLRenderer挂载 canvas 并处理resize定义 uniforms / onBeforeCompile 或 ShaderMaterial编写 GLSL 与材质参数创建 OrbitControls及 Raycaster 等交互控件若源码包含在requestAnimationFrame循环中更新状态并 renderCesium 为viewer.render或自动渲染代码要点import * as THREE from threeimport { OrbitControls } from three/examples/jsm/controls/OrbitControls.jsconst box document.getElementById(box)const scene new THREE.Scene()const camera new THREE.PerspectiveCamera(50, box.clientWidth / box.clientHeight, 0.1, 1000)camera.position.set(0, 10, 25)const renderer new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })renderer.setSize(box.clientWidth, box.clientHeight)box.appendChild(renderer.domElement)new OrbitControls(camera, renderer.domElement)const curve new THREE.EllipseCurve(0, 0, 8, 8, 0, 2 * Math.PI, false, 0); let pointsPos [];for (let i 0; i 5; i) { pointsPos.push(...curve.getPoints(719)); curve.xRadius 0.2; curve.yRadius 0.2; }const aIndex pointsPos.map((_, index) index); const geometry new THREE.BufferGeometry().setFromPoints(pointsPos);geometry.rotateX(Math.PI * 0.5); geometry.translate(0, 0.1, 2.5);const geoPosList geometry.getAttribute(position).array; const aNormals new Float32Array(geoPosList.length);for (let i 0; i geoPosList.length / 3; i) {const i3 i * 3; geoPosList[i3 1] Math.floor(i / 720) * 0.15; const baseIndex (i % 720) * 3; const offsetIndex ((i % 720) 7204)3; aNormals[i3] geoPosList[offsetIndex] - geoPosList[baseIndex]; aNormals[i3 1] geoPosList[offsetIndex 1] - geoPosList[baseIndex 1]; aNormals[i3 2] geoPosList[offsetIndex 2] - geoPosList[baseIndex 2]; }geometry.setAttribute(aNormal, new THREE.BufferAttribute(aNormals, 3)); geometry.setAttribute(aIndex, new THREE.BufferAttribute(new Float32Array(aIndex), 1)); geometry.setAttribute(position, new THREE.BufferAttribute(new Float32Array(geoPosList), 3));const pointsMaterial new THREE.PointsMaterial({ color: 0x409eff, size: 0.4, map: new THREE.TextureLoader().load(FILE_HOST images/texture/circle.png), alphaMap: new THREE.TextureLoader().load(FILE_HOST images/texture/circle.png), transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, });const uTime { value: 0 }; pointsMaterial.onBeforeCompile ((shader) {shader.uniforms.uTime uTime shader.uniforms.uPerlinTexture { value: new THREE.TextureLoader().load(FILE_HOST images/texture/noise.png) }; shader.uniforms.baseColor1 { value: new THREE.Color(0x90EE90) }; shader.uniforms.baseColor2 { value: new THREE.Color(0xFFA500) }; shader.uniforms.baseColor3 { value: new THREE.Color(0x9B30FF) }; shader.vertexShader shader.vertexShader.replace(#include ,#include attribute float aIndex; attribute vec3 aNormal; uniform float uTime; uniform sampler2D uPerlinTexture; varying float vIndex; varying float vSelfIndex; varying float vCircleNum; float getStrength(float aIndex,float uTime,vec3 aNormal){ float selfIndex mod(aIndex, 720.0); // 计算每个点在圆环上的位置索引 float circleNum (aIndex - selfIndex) / 720.0; // 计算点所在的“圈号”但此值目前未使用 vec3 pDir normalize(aNormal); // 获取法线方向后续将用其调整偏移方向 float waveWidth 90.0; // 波动效果的宽度 float totalLength 720.0; // 圆的总长度720度 float modUtime mod(uTime * 50.0, 720.0); // 时间的循环乘以 30.0 是加速效果 float dw waveWidth*0.5; // 平滑过渡的宽度控制波动的范围 // 计算波动强度 // 对首尾连接部分0 和 720进行平滑过渡处理 float smoothStart smoothstep(modUtime , modUtimedw, selfIndex); float smoothEnd 1.0-smoothstep(modUtimewaveWidth - dw,modUtimewaveWidth, selfIndex); // 创建平滑连接确保波动在 [720 - dw, 720 waveWidth] 和 [0, dw] 区间内平滑过渡 float strength min(smoothStart,smoothEnd); float isOverstep(720.0,modUtimewaveWidth); float over(modUtimewaveWidth-720.0); float isOverStep1(1.0-step(dw,over))*isOver; float isOverStep2step(dw,over); float overStep1Leftmin(smoothstep(modUtime,modUtimedw,selfIndex),(1.0-smoothstep(modUtimewaveWidth - dw,modUtimewaveWidth, selfIndex))); float overStep1Right1.0-smoothstep(modUtimewaveWidth - dw,modUtimewaveWidth, selfIndex720.0); float overStep1max(overStep1Left,overStep1Right); float overStep2Leftsmoothstep(modUtime,modUtimedw,selfIndex); float overStep2Rightmin(smoothstep(modUtime,modUtimedw,selfIndex720.0),(1.0-smoothstep(modUtimewaveWidth - dw,modUtimewaveWidth, selfIndex720.0))); float overStep2max(overStep2Left,overStep2Right); float osisOverStep1overStep1overStep2isOverStep2;strength(1.0-isOver)strengthisOveros; return strength; });shader.vertexShader shader.vertexShader.replace( #include , /glsl/#include float selfIndex mod(aIndex, 720.0); float circleNum (aIndex - selfIndex) / 720.0; vec3 pDir normalize(aNormal);float noisetexture(uPerlinTexture,vec2((selfIndex/720.0),mod(uTime*0.1,1.0))).r; float strengthgetStrength(aIndex,uTime,aNormal); strengthgetStrength(aIndex,uTime10.0noise,aNormal); strengthgetStrength(aIndex,uTime20.0noise,aNormal); strengthgetStrength(aIndex,uTime30.0noise,aNormal); strengthgetStrength(aIndex,uTime40.0noise,aNormal); strengthgetStrength(aIndex,uTime50.0noise,aNormal); strengthgetStrength(aIndex,uTime60.0noise,aNormal); strengthgetStrength(aIndex,uTime70.0noise,aNormal); strengthgetStrength(aIndex,uTime80.0noise,aNormal); strengthgetStrength(aIndex,uTime90.0noise,aNormal); // 偏移的强度因子当前没有动态变化 // 基于法线方向和波动强度偏移点的 x 和 z 坐标 transformed.x pDir.xstrength0.5; transformed.z pDir.zstrength0.5; transformed.y strengthcircleNumnoise*0.6 ; //transformed.y strengthcircleNum0.08; vIndex aIndex; // 将索引传递给片段着色器或者用于调试);shader.fragmentShader shader.fragmentShader.replace( #include , /glsl/varying float vIndex; uniform float uTime; uniform vec3 baseColor1; uniform sampler2D uPerlinTexture; uniform vec3 baseColor2; uniform vec3 baseColor3; #include);shader.fragmentShader shader.fragmentShader.replace( vec4 diffuseColor vec4( diffuse, opacity );, /glsl/vec3 whiteColor vec3( 1.0,1.0,1.0); float selfIndexmod(vIndex,720.0); float circleNum(vIndex - selfIndex)/720.0; //float nuomod(uTime*0.2,1.0); vec3 baseColormix(baseColor1,baseColor2,mod(uTime*0.1,1.0)); baseColormix(baseColor,baseColor3,mod(uTime*0.2,1.0)); vec3 finalColormix(baseColor,diffuse,circleNum/5.0); finalColor*1.0; vec4 diffuseColor vec4( finalColor, opacity );); })const points new THREE.Points(geometry, pointsMaterial); scene.add(points);animate()function animate() {uTime.value 0.01 requestAnimationFrame(animate) renderer.render(scene, camera)}完整源码GitHub小结本文提供科技粒子完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库