three.js 实现波纹效果
时间: 2023-11-04 20:05:47 浏览: 38
要实现波纹效果,可以使用Three.js中的ShaderMaterial和RenderTarget,具体步骤如下:
1. 创建一个平面几何体,设置它的宽度和高度为屏幕宽度和高度。
2. 创建一个ShaderMaterial,设置着色器代码和uniform变量。着色器代码可以参考下面的示例,uniform变量包括时间、波纹中心、波纹半径、波纹振幅和波纹颜色。
3. 创建一个RenderTarget,将平面几何体渲染到RenderTarget中。
4. 在场景中添加一个平面几何体,并将RenderTarget作为它的纹理贴图。
5. 在每一帧中更新uniform变量的值,以实现波纹的动态效果。
以下是一个简单的示例代码:
HTML部分:
```
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
<script src="./js/wave.js"></script>
</body>
```
JS部分:
```
// 创建场景、相机和渲染器
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建平面几何体
let geometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);
// 创建ShaderMaterial
let material = new THREE.ShaderMaterial({
uniforms: {
time: { type: "f", value: 0.0 },
center: { type: "v2", value: new THREE.Vector2(0.5, 0.5) },
radius: { type: "f", value: 0.0 },
amplitude: { type: "f", value: 0.1 },
color: { type: "c", value: new THREE.Color(0xffffff) }
},
vertexShader: document.getElementById("vertex_shader").textContent,
fragmentShader: document.getElementById("fragment_shader").textContent
});
// 创建RenderTarget
let renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
// 将平面几何体渲染到RenderTarget中
let mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);
// 在场景中添加一个平面几何体,并将RenderTarget作为它的纹理贴图
let plane = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ map: renderTarget.texture }));
scene.add(plane);
// 设置相机位置
camera.position.z = 5;
// 渲染循环
function render() {
requestAnimationFrame(render);
// 更新uniform变量的值
material.uniforms.time.value += 0.01;
material.uniforms.center.value.x += 0.001;
material.uniforms.center.value.y += 0.001;
material.uniforms.radius.value += 0.01;
// 将平面几何体渲染到RenderTarget中
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);
renderer.setRenderTarget(null);
// 渲染场景
renderer.render(scene, camera);
}
render();
```
着色器代码:
顶点着色器:
```
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
```
片元着色器:
```
uniform float time;
uniform vec2 center;
uniform float radius;
uniform float amplitude;
uniform vec3 color;
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec2 diff = center - uv;
float dist = length(diff);
float wave = amplitude * sin(time * 10.0 + dist * 10.0 - radius * 10.0);
gl_FragColor = vec4(color * wave, 1.0);
}
```