three.js特效扩散特效

你可以使用Three.js来创建扩散特效。下面是一种常见的实现方法：

1. 创建一个Three.js场景并添加一个平面几何体作为扩散效果的基础。

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.PlaneGeometry(10, 10); // 可根据需要调整大小
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); // 可根据需要调整颜色
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

2. 创建一个扩散效果的着色器材质。

const vertexShader = `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`;

const fragmentShader = `
  uniform float time;
  uniform vec2 resolution;

  varying vec2 vUv;

  void main() {
    vec2 p = -1.0 + 2.0 * vUv;
    float d = length(2.0 * p);

    float intensity = smoothstep(0.8, 0.5, d - time);
    vec3 color = vec3(intensity);

    gl_FragColor = vec4(color, 1.0);
  }
`;

const uniforms = {
  time: { value: 0 },
  resolution: { value: new THREE.Vector2() },
};

const material = new THREE.ShaderMaterial({
  uniforms,
  vertexShader,
  fragmentShader,
});
plane.material = material;

3. 在渲染循环中更新时间并渲染场景。

function animate() {
  requestAnimationFrame(animate);

  // 更新时间
  uniforms.time.value += 0.01;

  renderer.render(scene, camera);
}
animate();

这样就能在Three.js中实现一个简单的扩散特效了。你可以根据自己的需求进行调整和定制。希望对你有所帮助！