Three.js 为纹理渲染未处理的 png 图像

Question

使用 three.js，我试图创建一个场景，当相机远离它时，平面会变得透明。

然后我用从下面的方形图像编辑的圆形地图瓦片对平面对象进行纹理处理。

当我通过 ShaderMaterial 加载圆形图像时，纹理看起来像原始图像一样正方形。

奇怪的是，当图像加载到常规网格上时，它会按预期呈现 material。

你能告诉我为什么 three.js 会这样吗？另外，我如何使用着色器渲染圆形图块，同时保持其根据距离淡出的功能？

完整代码可在此处获得：https://codesandbox.io/s/tile-with-shader-7kw5v?file=/src/index.js

Answer 1

这里有一个选项，它只计算飞机和相机的 x 和 z 坐标。

vertex.glsl:

varying vec4 vPosition;
varying vec2 vUv;

void main() {
  vPosition = modelMatrix * vec4(position, 1.);
  vUv = uv;
  gl_Position = projectionMatrix * viewMatrix * vPosition;
}

frag.glsl:

uniform vec3 u_color;
uniform vec3 u_camera;
uniform vec3 u_plane;
uniform float u_rad;
uniform sampler2D u_texture;

varying vec4 vPosition;
varying vec2 vUv;

void main() {
  vec4 textureCol = texture2D(u_texture, vUv);
  float rad = distance(vPosition.xz, u_camera.xz); // xz-plane
  textureCol.a = 1.0 - step(1., rad / u_rad);

  gl_FragColor = textureCol;
}

和u_rad制服是 u_rad: { value: 50 },

Three.js 为纹理渲染未处理的 png 图像

Three.js renders unprocessed png image for texture

three.js

glsl