Question

我尝试在一个立方体上渲染一个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），问题仍然存在。

我错过了什么吗？

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/

使用WebGL渲染器的3-js画布纹理丢失透明度（可以使用Canvasrenderer）

1 个答案: