3

请查看启用和禁用 WebGL 的演示。

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

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

由于 WebGL 被禁用，您无法再欣赏透明度。

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

three.js 支持这个吗？有什么办法可以做到吗？我应该如何设置材质以使其即使在画布渲染中也能正常工作？

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

当前线框材质是这样声明的：

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

但仅在 WebGL 中表现如预期。

Jsfiddle在这里

谢谢阅读！

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

使用 webgl：

在此处输入图像描述 在此处输入图像描述

使用画布渲染：

在此处输入图像描述 在此处输入图像描述

4

1 回答 1

10

使用 时适用于您的情况的技巧是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/

三.js r.70

于 2013-04-05T08:09:48.550 回答