使用WebGL渲染器的3-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/