当前位置：首页 > news >正文

Three.js 波浪粒子教程

news 2026/7/6 8:21:06

波浪粒子 ·Wave· ▶ 在线运行案例

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

你将学到什么

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 到 scene
gui.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()