Gltf geometry and meshbasicmaterial as mesh got wrong rendering result

Questions
, ,
1 
loadGLTF(){
        const gltfLoader = new GLTFLoader();
		gltfLoader.load( 'model/scene.gltf', ( gltf ) => {
			const root = gltf.scene;
            //this.scene.add(root);
            const self = this;
            root.traverse(function (child) {
                if (child.isMesh) {
                    const mTest=new THREE.Mesh(child.geometry,new THREE.MeshBasicMaterial( { color: 0xffff00 } ));
                    self.scene.add(mTest);
                 
                }
            });
		} );
    }

I want to use geometry of the gltf and THREE.MeshBasicMaterial as mesh to render, but the result will be strange,it will be totally different from the shape of right model. and if I use .obj model this will not happen.I want to know why,if someone could tell me the reason, I would greatly appreciate it.

image
image926×1268 20.1 KB

this the wrong result
image
this is the original model

2

The visible shape of a mesh depends on two factors:

  • the coordinates of the vertices in the geometry
  • the position, scale and rotation properties of the mesh … and all its parent meshes

If you copy only the geometry data, the result might not be positioned, scaled and rotated as expected.

A side note:

I do not know what is your use case, but if you want to replace the materials of all elements in a GLTF model, you can do it by replacing the material (i.e. no need to create new meshes).

var yellowSubmarine = new THREE.MeshBasicMaterial({color: 'yellow'});

new GLTFLoader().load( modelURL, gltf => {
		model = gltf.scene;

		// scan all elements
		model.traverse( child =>
		{
			// make all materials flat yellow
			if( child.isMesh )
				child.material = yellowSubmarine;
		} );
			
		scene.add( model );
} );
1 Like
3

Thank you so much! I find the reason,as you said, the scale property of the mesh is not 1,1,1，and the position property also has influence on the final visible result. I just solved this problem.