科技粒子 ·Technology· ▶ 在线运行案例

• 案例合集：三维可视化功能案例（threehub.cn）
• 开源仓库github地址：https://github.com/z2586300277/three-cesium-examples
• 400个案例代码:网盘链接

你将学到什么

• 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循环中更新状态并 render（Cesium 为viewer.render或自动渲染）

• 代码要点

  import * as THREE from 'three'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  const 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 , modUtime+dw, selfIndex); float smoothEnd = 1.0-smoothstep(modUtime+waveWidth - dw,modUtime+waveWidth, selfIndex); // 创建平滑连接：确保波动在 [720 - dw, 720 + waveWidth] 和 [0, dw] 区间内平滑过渡 float strength = min(smoothStart,smoothEnd); float isOver=step(720.0,modUtime+waveWidth); float over=(modUtime+waveWidth-720.0); float isOverStep1=(1.0-step(dw,over))*isOver; float isOverStep2=step(dw,over); float overStep1Left=min(smoothstep(modUtime,modUtime+dw,selfIndex),(1.0-smoothstep(modUtime+waveWidth - dw,modUtime+waveWidth, selfIndex))); float overStep1Right=1.0-smoothstep(modUtime+waveWidth - dw,modUtime+waveWidth, selfIndex+720.0); float overStep1=max(overStep1Left,overStep1Right); float overStep2Left=smoothstep(modUtime,modUtime+dw,selfIndex); float overStep2Right=min(smoothstep(modUtime,modUtime+dw,selfIndex+720.0),(1.0-smoothstep(modUtime+waveWidth - dw,modUtime+waveWidth, selfIndex+720.0))); float overStep2=max(overStep2Left,overStep2Right); float os=isOverStep1overStep1+overStep2isOverStep2;
  strength=(1.0-isOver)strength+isOveros; 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 noise=texture(uPerlinTexture,vec2((selfIndex/720.0),mod(uTime*0.1,1.0))).r; float strength=getStrength(aIndex,uTime,aNormal); strength+=getStrength(aIndex,uTime+10.0+noise,aNormal); strength+=getStrength(aIndex,uTime+20.0+noise,aNormal); strength+=getStrength(aIndex,uTime+30.0+noise,aNormal); strength+=getStrength(aIndex,uTime+40.0+noise,aNormal); strength+=getStrength(aIndex,uTime+50.0+noise,aNormal); strength+=getStrength(aIndex,uTime+60.0+noise,aNormal); strength+=getStrength(aIndex,uTime+70.0+noise,aNormal); strength+=getStrength(aIndex,uTime+80.0+noise,aNormal); strength+=getStrength(aIndex,uTime+90.0+noise,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 selfIndex=mod(vIndex,720.0); float circleNum=(vIndex - selfIndex)/720.0; //float nuo=mod(uTime*0.2,1.0); vec3 baseColor=mix(baseColor1,baseColor2,mod(uTime*0.1,1.0)); baseColor=mix(baseColor,baseColor3,mod(uTime*0.2,1.0)); vec3 finalColor=mix(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 开源仓库