Canvas Three.js画布渲染和透明度

请观看启用和禁用WebGL的演示

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

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

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

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

three.js支持这个吗？我有什么办法可以做吗？我应该如何设置材质，使其即使与画布渲染一起工作

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

当前线框材质的声明方式如下：

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

但仅在WebGL中按预期操作

谢谢你的阅读

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

使用webgl：

使用画布渲染：

---

在您的案例中，使用

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 );

编辑：更新的小提琴：

---

three.js r.70

你能展示你的代码的一个实例（jsfiddle.net）并问一个具体的问题吗？你只关注线框模型吗？谢谢你的发帖。问题中有两个链接的示例，生成线框材质的代码就是发布的代码。你说的线框“模型”是什么意思？我只需要渲染网格的线框（边），而不是面，如果这是你的意思的话。关键是画布渲染缺少一些边，而使用webgl可以看到所有边。只要尝试一下Safari和Chrome的演示，你就会看到区别。我看到了区别。我想问你一个关于你的代码的问题，最好的方法是提供一个代码的实例。如果你能发布截图来说明你的意思，对我来说会很有帮助。我不确定您想要实现什么。请假设我的代码就是示例中发布的代码。如果您需要隔离导致问题的部分，只需查看我发布的代码：这就是您决定线框是否透明的地方。这是一些违反直觉但非常出色的东西！非常感谢您的帮助：）与问题完全无关：您是如何找到此解决方案的？您是否刚刚研究了整个three.js文档并了解了three.BackSide？Three.js它是巨大的，一个人怎么可能知道所有的提示和技巧，就像上面贴的一样？通过回答数百个像这样的问题。：-）向上投票！同样不相关的是，我也有类似的问题，但是在画布渲染器中加载了一个.obj。很多剪辑和3d小故障。伟大的解决方案，但只适用于简单的形状，如立方体？@MarcelFalliere，你只需进行实验。如果你有问题，请写一篇新文章。