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

【问题标题】：three-js canvas texture lost transparency with WebGL renderer (ok with Canvasrenderer)使用 WebGL 渲染器的三个 js 画布纹理失去透明度（可以使用 Canvasrenderer）
【发布时间】：2012-11-13 21:55:52
【问题描述】：

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

如果我使用 Canvasrenderer，画布透明度就可以了，并且弧只是打印出来的。
如果我使用 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 票，即使提出了解决方案 (mesh.dynamic = true)，问题仍然存在。

我错过了什么吗？

【问题讨论】：

标签： javascript canvas webgl three.js

【解决方案1】：

您需要将transparent 设置为true。

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

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

【讨论】：