在Three.js中对mesh使用”z-index” 不遮挡

一次业务需要中,需要让场景中的一部分mesh不受场景遮挡限制,类似于透视穿墙效果,就是能隔着墙看到墙后面的物体,也有点类似于css中对页面元素做z-index的操作,比如下图透视外挂的原理:

Three.js

根据THREE.JS文档提示:只需要修改mesh.renderOrder属性

mesh.renderOrder=99;

但根据我具体实现后,却发现根本没有作用,后来在网上查了,需要对mesh的material.depthTest属性设置为false
比如:

mesh.material.depthTest=false;

这样设置就有用了。

参考issues:https://github.com/mrdoob/three.js/issues/3212

Babylon.js

如果您使用的是babylonjs引擎:则只需要设置mesh.renderingGroupId,比如:

mesh.renderingGroupId=99;

babylonjs不需要设置其他属性。

另外提示:即便修改了这个属性,如果您用射线拾取场景中的模型做击中效果,射线击中反馈的数组中,还是按照正常的场景进行深度计算,也就是说如果需要透视显示的模型在场景中设置了mesh.renderOrder=99,同时出现在墙的后面,射线拾取的仍然是墙体,而并非墙后面的模型。

猜你喜欢

转载自blog.csdn.net/ALLENJIAO/article/details/81983593