Three.js画布渲染和透明度

当您在WebGL和canvas渲染之间切换时（如果您有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的其他选择。我必须准备这个演示，但我没有数学/几何知识来自己做这个，即使它像旋转3D立方体一样简单。

支持WebGL：

enter image description here

与画布渲染：

enter image description here

来源

2013-04-03 Saturnix

你能告诉你的代码的一个活生生的例子（jsfiddle.net），问一个具体问题？你是否只关心线框模型？ – WestLangley

感谢发布。在问题中有两个示例链接，生成线框材质的代码是张贴的。线框“模型”是什么意思？我需要渲染网格（边缘）的线框，而不是面部，如果这就是你的意思。点是一些边缘与画布渲染丢失，而与webgl你看到他们。只需使用Safari和Chrome试用这些演示程序，您就会看到不同之处。 – Saturnix

我看到了不同。我在问你关于你的代码的具体问题，最好的方法是提供一个你的代码的实例。 – WestLangley

你的情况，工作诀窍使用CanvasRenderer时，是创建两个相同位置的相同立方体 - 第二个e是倒置的。为了方便起见，您可以将它们都添加到父对象中，但这不是必需的。

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

来源

2013-04-05 08:09:48 WestLangley

现在，这是一些反直觉，但BRILLIANT的东西！非常感谢您的帮助:) – Saturnix

与问题完全无关：您是如何找到此解决方案的？你刚刚学习了三个.js文档，并了解了三个.BackSide？ Three.js很大，如何能够像上面发布的那样知道所有的提示和技巧？ – Saturnix

通过回答这样的数百个问题。 :-) – WestLangley

Three.js画布渲染和透明度

回答

相关问题