透明材料与三JS

Transparent material with ThreeJS

本文关键字：JS 材料 透明      更新时间：2023-09-26

我在 threejs 中有一个网格朗伯材料，定义如下：

new three.MeshLambertMaterial({
    transparent: true,
    emissive: 0xffffff,
    map: texture,
    alphaTest: 0.1
});

我们决定将alphaTest调到0.1，因为这似乎是使材料真正透明的唯一方法。否则，材料背后的背景色最终会成为透明色。上述技术的问题在于，我们在不透明的部分周围得到了一条丑陋的灰色线。这种纹理表示文本，这更糟。

有没有更好的方法来制作一种透明的材料，只显示它背后的物体？

听起来你有一个具有一定透明度的纹理，你希望纹理的透明度来决定材质的透明度。我说得对吗？如果是这样，这个小片段着色器应该可以工作：

<script id="fs" type="x-shader/x-fragment">
    uniform sampler2D iChannel0;
    varying vec2 vUv;  
    varying vec4 vColor;
    void main() {
        vec2 uv = vUv;
        vec4 tex1 = texture2D( iChannel0,  vec2(uv.x, uv.y));
        gl_FragColor = vec4(tex1.r,tex1.g,tex1.b,tex1.a);
    }
</script>

这里的工作示例：http://rwoodley.org/MyContent/SO/02/

相关文章：