三.js画布渲染和透明度答案

【问题标题】：Three.js canvas render and transparency三.js画布渲染和透明度
【发布时间】：2013-03-25 10:55:12
【问题描述】：

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

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

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

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

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

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

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

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

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

但仅在 WebGL 中按预期运行。

Jsfiddle here

感谢阅读！

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

使用 webgl：

使用画布渲染：

【问题讨论】：

你能展示你的代码的一个活生生的例子（jsfiddle.net）并提出一个具体的问题吗？您只对线框模型感到担忧吗？
感谢发帖。问题中链接了两个示例，生成线框材料的代码是发布的。线框“模型”是什么意思？我只需要渲染网格的线框（边缘），如果这就是您的意思，则不需要渲染面。重点是画布渲染缺少一些边缘，而使用 webgl 你可以看到它们。只需尝试使用 Safari 和 Chrome 进行演示，您就会看到不同之处。
我看到了不同之处。我要你问一个关于你的代码的具体问题，最好的方法是提供你的代码的一个活生生的例子。
对我来说，如果你能张贴截图来说明你的意思会很有帮助。我不确定你想要达到什么目的。
请假设我的代码是示例中发布的代码。如果您需要隔离导致问题的部分，只需查看我发布的代码：这就是您决定线框是否透明的地方。

标签： canvas three.js

【解决方案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 文档并了解了THREE.BackSide？ Three.js 很大，怎么可能像上面贴的那样知道所有的技巧和窍门？
通过回答数百个这样的问题。 :-)
点赞！也不相关，我有同样的问题，但是将 .obj 加载到 canvasrenderer 中。大量的剪辑和 3d 故障。很好的解决方案，但仅适用于简单的形状，例如立方体？
@MarcelFalliere 你只需要尝试一下。如果您遇到问题，请发新帖子。