three.js - 使用three.js渲染透明对象的两侧时的工件

Question

我尝试使用three.js 渲染透明对象的两侧。位于透明对象内的其他对象也应该显示出来。可悲的是，我得到了我不太了解的工件。这是一个测试页面:https://dl.dropbox.com/u/3778149/webgl_translucency/test.html

这是所述工件的图像。它们似乎源于潜在的球体几何形状。


有趣的是，对于混合模式 THREE.SubtractiveBlending = 2，工件不可见。


任何帮助表示赞赏!

亚历克斯

Answer 1

自透明在 WebGL 和three.js 中特别困难。你只需要真正理解问题，然后调整你的代码来达到你想要的效果。

您可以通过一个技巧在three.js 中实现双面透明球体的外观:您需要渲染两个透明球体——其中一个使用material.side = THREE.BackSide ，还有一个 material.side = THREE.FrontSide .

如果您想要无伪影的自透明，通常需要使用此类方法——尤其是当您允许相机或物体移动时。

这是一个 fiddle :http://jsfiddle.net/x5bm0qLf/

编辑:更新 fiddle 到three.js r.105