javascript - 三个 js Canvas 纹理使用 WebGL 渲染器丢失透明度(使用 Canvasrenderer 可以)

Question

我尝试在一个立方体上渲染一个 CircleGeometry(从相机的 Angular 我们展示了两者)。立方体是单色的，圆圈是 Canvas ，只有弧线，没有背景色。

• 如果我使用 Canvasrenderer， Canvas 透明度就可以了，而且弧只是打印。
• 如果我使用 WebGL 渲染器，整个圆会被页面背景色填充，上面只显示圆弧，因此透明度会丢失。

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

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

)

这听起来很像 three.js textures working with CanvasRenderer, but show up as black with WebGLRenderer ticket，即使提出了解决方案 (mesh.dynamic = true)，问题仍然存在。

我错过了什么吗？

Answer 1

您需要将material.transparent设置为true。

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

three.js r.144