javascript - 使用 WebGL 渲染器的三个 js 画布纹理失去透明度（可以使用 Canvasrenderer）

Question

我尝试在一个立方体上渲染一个 CircleGeometry（从相机的角度来看，我们同时展示了两者）。立方体是纯色的，圆圈有一个只有圆弧且没有背景颜色的画布。

• 如果我使用 Canvasrenderer，画布透明度还可以，并且弧只是打印。
• 如果我使用 WebGL 渲染器，整个圆圈会被页面背景颜色填充，上面只显示弧线，所以透明度会丢失。

我为此创建了一个测试：http: //jsfiddle.net/f4u7s/6/ ，您可以在其中切换 WebGL 和 CanvasRendering 以显示问题。（寻找

// ------------> Switch HERE
    //renderer = new THREE.CanvasRenderer();
    renderer = new THREE.WebGLRenderer();

)

这听起来像使用 CanvasRenderer 的three.js 纹理，但使用 WebGLRenderer票证显示为黑色，即使提出了解决方案 (mesh.dynamic = true)，问题仍然存在。

我错过了什么吗？

Answer 1

您需要设置transparent为true.

plane = new THREE.Mesh(
    new THREE.CircleGeometry(50, 50),
    new THREE.MeshBasicMaterial({
        map: texture,
        transparent: true
    })
);

更新小提琴：http: //jsfiddle.net/f4u7s/10/