1. 程式人生 > >在Three.js中對mesh使用”z-index” 不遮擋

在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,同時出現在牆的後面,射線拾取的仍然是牆體,而並非牆後面的模型。