three.js 实现波纹效果
时间: 2023-11-06 16:04:32 浏览: 33
在 three.js 中实现波纹效果,可以使用 ShaderMaterial 来实现。
首先,定义一个平面几何体,设置一个材质为 ShaderMaterial。ShaderMaterial 的顶点着色器和片元着色器中可以实现波纹效果。
顶点着色器中,需要定义一个 uniform 变量 time,表示时间。然后根据顶点在 x 和 z 轴上的位置,计算出顶点的 y 坐标,实现波浪形变。
片元着色器中,需要定义波纹的颜色和透明度。可以使用简单的纹理贴图或者自定义的纹理来实现。
以下是实现波纹效果的 ShaderMaterial 代码示例:
```javascript
const vertexShader = `
uniform float time;
void main() {
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
float waveHeight = sin(mvPosition.x * 2.0 + time) * sin(mvPosition.z * 2.0 + time) * 0.2;
mvPosition.y += waveHeight;
gl_Position = projectionMatrix * mvPosition;
}
`;
const fragmentShader = `
uniform vec3 color;
uniform float opacity;
void main() {
gl_FragColor = vec4(color, opacity);
}
`;
const material = new THREE.ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new THREE.Color(0x00ff00) },
opacity: { value: 0.5 }
},
vertexShader,
fragmentShader
});
const plane = new THREE.PlaneGeometry(10, 10, 32, 32);
const mesh = new THREE.Mesh(plane, material);
function animate() {
requestAnimationFrame(animate);
material.uniforms.time.value += 0.1;
renderer.render(scene, camera);
}
```
在 animate() 函数中,每帧更新时间变量 time 的值,实现波纹效果的动画。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)