Question

请同时查看this演示，同时启用和禁用WebGL。

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

启用WebGL后，您还可以看到球体背面的线框（隐藏在其他球体上的部分，因为它们具有非透明材质）。

当WebGL被禁用时，您无法再欣赏透明度了。

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

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

为了进一步证明我的观点，here's第二个演示。与在WebGL和画布之间切换相同的问题。

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

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

但仅在WebGL中表现如预期。

Jsfiddle here

感谢阅读！

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

使用webgl：

enter image description here

使用画布渲染：

enter image description here

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

Three.js画布渲染和透明度

1 个答案: