Three.js 透明物体不能正常显示(闪烁)/渲染顺序的控制问题

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
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值