Using threeGLTFLoader load gltf get transparency problem

Questions
1

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

360截图18720122386656

QQ图片20200520110942
QQ图片20200520110942885×1738 105 KB

Model link

2

/cc

3

I use this official link

4

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

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

1 Like
5

Here is the demo comes from kalwalt, and Load Model with this js