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

标签 three.js transparency

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

这是所述工件的图像。它们似乎源于潜在的球体几何形状。
artifacts with blending mode: THREE.AdditiveBlending = 1

有趣的是,对于混合模式 THREE.SubtractiveBlending = 2,工件不可见。
enter image description here

任何帮助表示赞赏!

亚历克斯

最佳答案

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

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

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

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

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

关于three.js - 使用three.js渲染透明对象的两侧时的工件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13221328/

相关文章:

python - 透明窗口背景(Python Tkinter)

flash - JWplayer透明屏颜色参数

PHP GD 如何圆形裁剪 3 个方形图像并合并为 1 个图像保持透明度

javascript - 将图像环绕球体

javascript - Threejs 中鼠标相机光线转换的问题

javascript - 从新对象中运行 requestAnimationFrame

Three.js 平面不转换阴影

javascript - 如何使用 Three.js 加载 VRML 模型 (wrl)

android - 在 imageview 上添加半透明覆盖

html - 透明框上的不透明文本