Three.js 3D场景透明物体不能正常显示/3D渲染顺序的控制问题

本篇文章主要讨论Three.js中的渲染机制,以及在部分场景中透明的物体渲染不正确,渲染顺序错误等问题。国内好像很少有人有讨论这方面的问题,stackoverflow以及github倒是很多。在本文的最后将会贴出参考文章的地址。此外,如果本文观点有任何错误,欢迎各位指出,一起学习进步,谢谢!

Three.js的渲染机制

three的渲染器是基于webGL的。它的渲染机制是根据物体离照相机的距离来控制和进行渲染的。对于透明的物体,则是按照从最远到最近的顺序进行渲染。也就是说,它根据物体的空间位置进行排序,然后根据这个顺序来渲染物体。

如何控制渲染顺序?

1.设置
renderer.sortObjects = false;
这样,物体的渲染顺序将会由他们添加到场景中的顺序所决定。适合大部分场景。
2.设置
renderer.sortObjects = true;
并且给特定的物体设置object.renderOrder 指定它的渲染顺序。
默认renderOrder = 0;
3.设置
material1.depthWrite = false
material2.depthWrite = false


对于透明物体

如果发现场景中的透明物体显示有问题,例如旋转摄像机的时候会出现闪烁等问题。可以尝试以下几种方法
1.设置
material.transparent = false
注意:不透明物体将会优先渲染。所以这也可以作为控制渲染顺序的一个方法。
2.设置
material.alphaTest = 0.1
自己尝试改变不同的alpha测试值,以适合你自己的场景。
3.尝试改变sortObject和depthWrite的值等等。


创建两个场景

可以控制某个物体”始终显示在最前面”,同样可以控制渲染顺序。因为应用场景不多,不做介绍。不过具体可参考
这一篇文章


参考文章:
[1] https://stackoverflow.com/questions/15514274/three-js-how-to-control-rendering-order
[2] https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs/15995475#
[3] https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs
[4] https://stackoverflow.com/questions/12666570/how-to-change-the-zorder-of-object-with-threejs/12666937#12666937
[5] https://stackoverflow.com/questions/28543574/three-js-transparent-objects-rendering-in-wrong-order-depending-on-camera-angle

原文地址:https://www.jianshu.com/p/5807b5f69480

WEBGL学习网(WebGLStudy.COM)专注提供WebGL 、ThreeJS、BabylonJS等WEB3D开发案例源码下载。
声明信息:
1. 本站部分资源来源于用户上传和网络,如有侵权请邮件联系站长:1218436398@qq.com!我们将尽快处理。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源打赏售价用于赞助本站提供的服务支出(包括不限服务器、网络带宽等费用支出)!
7.欢迎加QQ群学习交流:549297468 ,或者搜索微信公众号:WebGL学习网
WEBGL学习网 » Three.js 3D场景透明物体不能正常显示/3D渲染顺序的控制问题

发表评论

提供优质的WebGL、ThreeJS源码

立即查看 了解详情