Three.js画布渲染和透明度

Question

请看看这个带有WebGL启用和禁用的演示.

当您在WebGL和画布渲染之间切换时(如果您有WebGL,它会在javascript检测时自动完成),只有线框的球体(左边的第一个)会发生变化.

启用WebGL后,您还可以看到球体背面的线框(由于它们具有非透明材质,因此隐藏在其他球体上的部分).

由于WebGL被禁用,您无法再欣赏透明度了.

我正在准备一个演示,我想为那些不支持WebGL的浏览器提供支持:提高透明度是至关重要的,因为我的想法完全基于它.我的演示文稿只有一个6面立方体,我想即使旧的CPU也应该没有问题在透明线框中呈现它.

three.js支持这个吗？有什么办法可以吗？我应该如何设置材料,以便即使使用画布渲染也能正常工作？

为了进一步证明我的观点,这是第二个演示.在WebGL和画布之间切换时的问题相同.

当前的线框材质以这种方式声明:

new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: true } ); 

但只在WebGL中表现如预期.

Jsfiddle在这里

谢谢阅读!

ps我愿意采用任何替代Three.js,如果这不能做我需要的.我必须准备这个演示,但我没有自己的数学/几何知识,即使它像旋转三维立方体一样简单.

使用webgl:

用画布渲染:

Answer 1

在您使用时,适用于您的情况的技巧CanvasRenderer是在同一位置创建两个相同的立方体 - 第二个是翻转的.为方便起见,您可以将它们都添加到父对象中,但这不是必需的.

var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1 } ); 

var wireframeMaterial2 = new THREE.MeshBasicMaterial( { color: 0x00ee00, wireframe: true, transparent: false, opacity: 1, side: THREE.BackSide } ); 

var cube = new THREE.Mesh( geometry, wireframeMaterial );
            parent.add( cube );

var cube2 = new THREE.Mesh( geometry, wireframeMaterial2 );
            parent.add( cube2 );

编辑:更新小提琴:http://jsfiddle.net/k0vcnkqh/

three.js r.70