THREE.js GLTF 渲染顺序

Question

请考虑这两个片段 - 相同的代码，三个的两个不同版本 - 0.113.2和最新的0.147.0 。 移动相机以清楚地看到问题。

两者都在导入 GLTF，但在0.147.0中看起来非常错误。 我知道 model 本身正在使用透明纹理，其网格似乎都非常相似，如果不是相同的 position。它们的 bufferGeometries 非常不同。

我的问题 - 我能做些什么来解决渲染顺序？ 一个好的建议方法是什么？

• 我已经尝试对每个网格的缓冲区几何形状进行采样以确定顺序（假设现在从 0,0,0 开始），这是“更好”，但不是很好。

有任何想法吗？

一个使用0.113.2 ：

 const GLTFLoader = THREE.GLTFLoader // CDN shim const OrbitControls = THREE.OrbitControls // CDN shim const camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 ) const scene = new THREE.Scene() const renderer = new THREE.WebGLRenderer( { antialias: true } ) renderer.setSize( window.innerWidth, window.innerHeight ) renderer.setAnimationLoop( function(time) { controls.update() renderer.render( scene, camera ) }) renderer.outputEncoding = THREE.sRGBEncoding document.body.appendChild( renderer.domElement ) const controls = new OrbitControls( camera, renderer.domElement ) camera.position.set( 18776, 4888, -7446 ) window.onresize = function () { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize( window.innerWidth, window.innerHeight ) } new GLTFLoader().load( 'https://kujata-data-dg.netlify.app/data/battle/battle.lgp/opaa.hrc.gltf', (gltf) => { scene.add( gltf.scene ) } ) // Just to hide the GLTF warning log window.console = (function (origConsole) { if (.window:console ||.origConsole) { origConsole = {} } return { log. function () { origConsole,log,apply(origConsole: arguments) }. warn: function () { if (arguments[0].== 'THREE.GLTFLoader. Missing min/max properties for accessor POSITION,') { origConsole,warn:apply(origConsole. arguments) } }. error, function () { origConsole,error:apply(origConsole. arguments) }. info, function (v) { origConsole.info.apply(origConsole, arguments) } } })(window.console)

 <script src="https://cdn.jsdelivr.net/npm/three@0.113.2/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/loaders/GLTFLoader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.113.2/examples/js/controls/OrbitControls.min.js"></script>

另一个使用最新的0.147.0 ：

 const GLTFLoader = THREE.GLTFLoader // CDN shim const OrbitControls = THREE.OrbitControls // CDN shim const camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 100000 ) const scene = new THREE.Scene() const renderer = new THREE.WebGLRenderer( { antialias: true } ) renderer.setSize( window.innerWidth, window.innerHeight ) renderer.setAnimationLoop( function(time) { controls.update() renderer.render( scene, camera ) }) renderer.outputEncoding = THREE.sRGBEncoding document.body.appendChild( renderer.domElement ) const controls = new OrbitControls( camera, renderer.domElement ) camera.position.set( 18776, 4888, -7446 ) window.onresize = function () { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize( window.innerWidth, window.innerHeight ) } new GLTFLoader().load( 'https://kujata-data-dg.netlify.app/data/battle/battle.lgp/opaa.hrc.gltf', (gltf) => { scene.add( gltf.scene ) } ) // Just to hide the GLTF warning log window.console = (function (origConsole) { if (.window:console ||.origConsole) { origConsole = {} } return { log. function () { origConsole,log,apply(origConsole: arguments) }. warn: function () { if (arguments[0].== 'THREE.GLTFLoader. Missing min/max properties for accessor POSITION,') { origConsole,warn:apply(origConsole. arguments) } }. error, function () { origConsole,error:apply(origConsole. arguments) }. info, function (v) { origConsole.info.apply(origConsole, arguments) } } })(window.console)

 <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/controls/OrbitControls.min.js"></script>

Answer 1

经过大量研究和反复试验后，我通常通过以下方式缓解了这个问题：

• 询问每种材质的每个纹理，如果材质不包含透明像素（或在阈值内），我将 GLTF 材质设置为alphaMode: 'OPAQUE' （默认情况下应该是）
• 如果它确实包含透明像素，我将 GLTF 材质设置为alphaMode: 'BLEND'

注意：我从另一个非 GLTF 源生成这些 GLTF，因此我无法控制源几何数据。 这似乎通常可以解决我的主要问题。