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