canvas - Three.js Canvas 渲染和透明度

Question

请看一下this启用和禁用 WebGL 的演示。

当您在 WebGL 和 Canvas 渲染之间切换时(当 JavaScript 检测您是否有 WebGL 时，它会自动完成)，仅线框球体(左侧第一个球体)会发生变化。

启用 WebGL 后，您还可以看到球体背面的线框(该部分隐藏在其他球体上，因为它们具有不透明 Material )。

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

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

Three.js 支持这个吗？我有什么办法可以做到吗？我应该如何设置 Material ，使其即使在 Canvas 渲染下也能正常工作？

为了进一步证明我的观点，here's第二个演示。在 WebGL 和 canvas 之间切换时出现同样的问题。

当前线框 Material 是这样声明的:

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

但仅在 WebGL 中按预期运行。

Jsfiddle here

感谢您的阅读!

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

使用 webgl:

使用 Canvas 渲染:

Answer 1

注意:这个问题是关于 CanvasRenderer 的，它已从 Three.js 库中删除。

<小时/>

在使用 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 );

三.js r.70