Using threeGLTFLoader load gltf get transparency problem

1
votes

I try to use threeGLTFLoader to load gltf ,problem with the material,the model is a man’s head but now i could see the back here is the code:

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);
});

enter image description here

enter image description here

The link of 3D model

2
three.jsgltf
Are you using GLTFLoader from the official three npm package or from a third-party package? - Mugen87
just download from the official link - user13511530
Are there two models here? The 2nd image looks different, and looks totally fine in gltf-viewer.donmccurdy.com (which also uses three.js)... can you share the complete code for your scene? Including the camera creation especially. Might need a higher near plane or a smaller far plane on the camera. - Don McCurdy

2 Answers

0
votes

Without the model it's hard to guess what's going on here, but I'll wager a guess based on seeing this kind of back-is-in-front rendering before.

I think your glTF model probably has materials that are marked "alphaMode": "BLEND".

In most realtime 3D rendering systems, including ThreeJS, blended or translucent materials will disable the depth buffer, and can be rendered out of order. There are ways for some engines to fix or work around this, but they can cost performance and increase complexity.

For opaque materials in a glTF file, the best thing to do is leave alphaMode set to its default value OPAQUE. Only materials that really need to be translucent should be set to BLEND.

0
votes

Ed Mackey’s answer on GitHub is a good explanation of why this is happening. If you’re the author of the model, it’s an issue you could fix by disabling transparency on parts of the model that aren’t meant to be transparent. If you’re not the author of the model, you can override the incorrect transparency settings after loading the model in three.js:

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

This code will disable transparency everywhere on the model. In more complex cases you may need to select specific parts of the mesh to override, and that is easier to do in Blender, using Alpha Clip or Opaque modes.