三步解锁 three.js 城市扫光效果

想要实现炫酷的城市扫光效果，three.js 提供了三种方法：后处理、模版和材质。每种方法都有其优缺点，让我们一一探索：

后处理

后处理是在渲染完成后对图像进行处理，达到扫光效果。具体步骤如下：

1. 渲染场景时，将深度信息存储在纹理中。
2. 在片段着色器中，根据深度值和时间偏移来控制像素颜色，实现扫光效果。

模版

模版法通过深度测试来实现扫光效果，原理如下：

1. 创建一个带有深度值的纹理。
2. 在片段着色器中，将深度值与模版纹理进行比较，决定是否绘制像素。
3. 通过动画调整深度值，实现扫光效果。

材质

材质法使用自定义材质来实现扫光效果，步骤如下：

1. 创建一个自定义材质，实现扫光逻辑。
2. 将该材质应用到需要扫光效果的网格上。
3. 动画调整材质参数，控制扫光效果。

选择方法

三种方法各有千秋：

• 后处理：简单易用，但性能开销较大。
• 模版：性能较好，但实现较为复杂。
• 材质：灵活可控，但自定义材质需要一定技术基础。

根据你的具体需求和技术水平，选择合适的方法即可。

示例代码

以下提供了一个使用材质法实现扫光效果的示例代码：

import * as THREE from 'three';

// 创建场景和相机
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建网格
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.ShaderMaterial({
  uniforms: {
    time: { value: 0.0 }
  },
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * position;
    }
  `,
  fragmentShader: `
    uniform float time;
    void main() {
      float depth = gl_FragCoord.z;
      float offset = sin(time) * 0.5 + 0.5;
      if (depth < offset) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      } else {
        gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0);
      }
    }
  `
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);

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

  // 渲染场景
  renderer.render(scene, camera);
}

通过调整材质中的 time 偏移，即可控制扫光效果的速度和位置。