波浪粒子 ·Wave· ▶ 在线运行案例案例合集三维可视化功能案例threehub.cn开源仓库github地址https://github.com/z2586300277/three-cesium-examples400个案例代码:网盘链接你将学到什么ShaderMaterial 自定义着色器实现核心视觉效果THREE.Points 粒子点渲染requestAnimationFrame渲染循环与resize自适应效果说明本案例演示波浪粒子效果基于 WebGL 实现「波浪粒子」可视化效果附完整可运行源码核心用到 ShaderMaterial、THREE.Points。建议先打开文首在线案例查看动态画面再对照下方源码逐步理解。核心概念Scene / Camera / WebGLRenderer构成最小渲染闭环大场景可开logarithmicDepthBuffer缓解 Z-fighting。ShaderMaterial通过uniforms 自定义 GLSL 控制逐像素/逐点效果透明粒子常配合depthTest: false。THREE.Points将每个顶点渲染为可控大小的粒子可用自定义 attribute如u_index驱动片元/顶点动画。实现步骤定义 uniforms在 rAF 中更新并 render构建几何 attribute 或 instanceMatrix 并 add 到 scenegui.add 绑定可调参数代码要点import { BufferAttribute, Clock, Color, PerspectiveCamera, PlaneGeometry, Points, Scene, ShaderMaterial, WebGLRenderer } from three;import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js;const sizes { width: window.innerWidth, height: window.innerHeight }const scene new Scene()const camera new PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 100) camera.position.z 10 camera.position.y 1.1 camera.position.x 0 scene.add(camera)const planeGeometry new PlaneGeometry(20, 20, 150, 150) const planeMaterial new ShaderMaterial({ uniforms: { uTime: { value: 0 }, uElevation: { value: 0.482 }, ucolor: { value: new Color(0x9ab0f4) }, bsize: { value: 3 } }, vertexShader:uniform float uTime; uniform float uElevation;attribute float aSize; uniform float bsize;varying float vPositionY; varying float vPositionZ;void main() { vec4 modelPosition modelMatrix * vec4(position, 1.0); modelPosition.y sin(modelPosition.x - uTime)sin(modelPosition.z0.6 uTime) * uElevation;vec4 viewPosition viewMatrix * modelPosition; gl_Position projectionMatrix * viewPosition;gl_PointSize 2.0 * aSize; gl_PointSize ( 1.0 / - viewPosition.z )bsize;vPositionY modelPosition.y; vPositionZ modelPosition.z; }, fragmentShader:varying float vPositionY; varying float vPositionZ; uniform vec3 ucolor;void main() { float strength (vPositionY 0.25) * 0.3; gl_FragColor vec4(ucolor, strength); }, transparent: true, }) const planeSizesArray new Float32Array(planeGeometry.attributes.position.count) for (let i 0; i planeSizesArray.length; i) { planeSizesArray[i] Math.random() * 4.0 } planeGeometry.setAttribute(aSize, new BufferAttribute(planeSizesArray, 1)) const plane new Points(planeGeometry, planeMaterial) plane.rotation.x - Math.PI * 0.4 scene.add(plane)window.addEventListener(resize, () { sizes.width window.innerWidth sizes.height window.innerHeight camera.aspect sizes.width / sizes.height camera.updateProjectionMatrix() renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)) })const renderer new WebGLRenderer() document.body.appendChild(renderer.domElement) renderer.setSize(sizes.width, sizes.height) renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1))const gui new GUI() const planeFolder gui.addFolder(Plane) planeFolder.addColor(planeMaterial.uniforms.ucolor, value).name(Color) planeFolder.add(planeMaterial.uniforms.bsize, value).min(0).max(10).step(0.001).name(Size)const clock new Clock() const animate () { const elapsedTime clock.getElapsedTime() planeMaterial.uniforms.uTime.value elapsedTime renderer.render(scene, camera) window.requestAnimationFrame(animate) }animate()完整源码GitHub小结本文提供波浪粒子完整 Three.js 源码与在线 Demo建议先运行案例再改 uniform/参数做二次实验更多 Three.js 实战案例见 three-cesium-examples 合集 与 GitHub 开源仓库