threejs把平面模型的边缘渐变成透明

要将 Three.js 中的平面模型边缘渐变成透明，你可以使用 ShaderMaterial 来实现。以下是一些步骤：

1. 创建一个平面模型和一个 ShaderMaterial。

const geometry = new THREE.PlaneGeometry(2, 2);
const material = new THREE.ShaderMaterial({
  uniforms: {},
  vertexShader: `
    void main() {
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    void main() {
      vec2 uv = vec2(gl_FragCoord.xy / resolution.xy);
      float distanceToEdge = length(uv - 0.5) * 2.0;
      float alpha = smoothstep(0.5, 0.0, distanceToEdge);
      gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
    }
  `,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

2. 在 fragment shader 中计算每个像素到边缘的距离，并使用 smoothstep 函数将距离转换为透明度。

void main() {
  vec2 uv = vec2(gl_FragCoord.xy / resolution.xy);
  float distanceToEdge = length(uv - 0.5) * 2.0;
  float alpha = smoothstep(0.5, 0.0, distanceToEdge);
  gl_FragColor = vec4(1.0, 1.0, 1.0, alpha);
}

在这个 fragment shader 中，我们首先将像素坐标转换为 UV 坐标，然后计算每个像素到边缘的距离。接下来，我们使用 smoothstep 函数将距离转换为透明度。smoothstep 函数接受三个参数：起始值、结束值和中间值。在这里，我们将起始值设置为 0.5，结束值设置为 0.0，中间值设置为 distanceToEdge，这将使距离越远的像素透明度越高。

3. 渲染场景并调整相机位置。

function render() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;

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

render();

camera.position.z = 2;

这是一个基本的示例，你可以根据自己的需要进行更改和调整。请注意，在计算每个像素到边缘的距离时，我们将平面模型的尺寸设置为 2x2。如果你的平面模型有不同的尺寸，你需要相应地调整计算距离的方式。