three.js 粒子水韵效果
时间: 2025-05-15 22:05:37 浏览: 19
### Three.js 实现粒子水波纹效果
实现粒子水波纹效果可以通过 `THREE.BufferGeometry` 和自定义着色器来完成。以下是基于提供的工程代码[^1]以及常见实践方法的一个解决方案。
#### 使用 BufferGeometry 创建粒子系统
通过 `THREE.Points` 结合 `THREE.BufferGeometry` 可以高效渲染大量粒子。下面是一个基本框架:
```javascript
// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建几何体并设置属性
const geometry = new THREE.BufferGeometry();
// 定义顶点位置 (x, y, z)
const vertices = [];
for (let i = 0; i < 10000; i++) {
const x = Math.random() * 200 - 100;
const y = Math.random() * 200 - 100;
const z = Math.random() * 200 - 100;
vertices.push(x, y, z);
}
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
// 自定义材质,用于模拟水波纹效果
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 }
},
vertexShader: `
uniform float time;
attribute vec3 position;
void main() {
// 添加简单的正弦波动效果
vec3 newPosition = position;
newPosition.y += sin(newPosition.x + time) * 0.5;
gl_PointSize = 2.0;
gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
}
`,
fragmentShader: `
void main() {
gl_FragColor = vec4(0.0, 0.8, 1.0, 1.0); // 蓝绿色调
}
`
});
// 创建粒子系统
const particles = new THREE.Points(geometry, material);
scene.add(particles);
camera.position.z = 200;
function animate(time) {
requestAnimationFrame(animate);
// 更新时间变量以驱动动画
material.uniforms.time.value = time * 0.001;
renderer.render(scene, camera);
}
animate();
```
上述代码展示了如何创建一个带有动态波动效果的粒子系统。其中的关键在于 **vertex shader** 中的时间参数 (`time`) 驱动了每个粒子的位置变化,从而实现了类似水波的效果。
---
#### 进一步优化与扩展
为了更真实地表现水波涟漪效果,可以引入以下技术:
1. **纹理映射**: 将水面反射或折射贴图应用到粒子上。
2. **噪声函数**: 利用 Perlin 噪声或其他随机化算法增强自然感。
3. **物理仿真**: 模拟真实的水波传播行为,例如扩散方程或傅里叶变换。
---
###
阅读全文
相关推荐













