在Three.js中對mesh使用”z-index” 不遮擋
阿新 • • 發佈:2018-11-22
一次業務需要中,需要讓場景中的一部分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
,同時出現在牆的後面,射線拾取的仍然是牆體,而並非牆後面的模型。