使用threeGLTFLoader加载gltf获取透明度问题

Question

我尝试使用threeGLTFLoader加载gltf，材料有问题，模型是一个人的头，但是现在我可以看到后面了 这是代码：

var threeGLTFLoader = new THREE.GLTFLoader();

var objPositions;

threeGLTFLoader.load("../resources/untitled.gltf", function (gltf) {
    model = gltf.scene;
    model.name = "man";
    model.scale.set(300, 300, 300);
    root.matrixAutoUpdate = false;
    root.updateMatrix();
    root.add(model);
});

3D model

的链接

Answer 1

没有模型，很难猜测这里发生了什么，但是我将基于之前看到的这种“从后在前”渲染来做出猜测。

我认为您的glTF模型可能包含标记为"alphaMode": "BLEND"的资料。

在大多数实时3D渲染系统中，包括ThreeJS，混合或半透明的材质将禁用深度缓冲区，并且可以无序渲染。有些引擎可以通过一些方法来解决或解决此问题，但是它们可能会降低性能并增加复杂性。

对于glTF文件中的不透明材质，最好的做法是将alphaMode设置为其默认值OPAQUE。仅将确实需要透明的材料设置为BLEND。

Answer 2

Ed Mackey在GitHub上的答案很好地说明了为什么会这样。如果您是模型的作者，则可以通过在模型的不透明的部分上禁用透明性来解决此问题。如果您不是模型的作者，则可以在将模型加载到three.js中之后覆盖不正确的透明度设置：

model.traverse((object) => {
  if (object.isMesh) object.material.transparent = false;
});

此代码将禁用模型上所有位置的透明度。在更复杂的情况下，您可能需要选择要覆盖的网格的特定部分，而使用Alpha剪辑或不透明模式在Blender中更容易做到这一点。