How to correctly display the materials of gltf?

Questions
1

hello there, I have a question about GLTF loader.
But gltf material looks different from the original material of the model.

Please tell me how to make it correct.

Here’s what it looks like in viewer
1695031397342_A8DE26F1-D002-4171-A72F-6EBC465AD83B

and here is what I got in 3JS
image

here is my code, it doesn’t seem to have any problems.

        gltfLoader.load('/static/test.glb', function (gltf) {
            gltf.scene.position.set(0,0,0);
            gltf.scene.traverse((child) => function () {
                if(child.isMesh) {
                    child.geometry.computeVertexNormals();
                    child.material = new THREE.MeshPhysicalMaterial({
                        clearcoat: 1,
                        clearcoatRoughness: 0.1,
                        transmission: 1,
                    });
                }
            })
            scene.add(gltf.scene);
        })

Here is the GLTF file which I am using
0918.glb (113.5 KB)

1 Like
2

you are missing an environment map, which is where the reflections come from. gltf does not contain that.

other than that, you can’t compare raycasting with what threejs does. everything in webgl will look harsh and ugly by default, lights do not scatter, there’s no global illumination, no ambient occlusion, no softshadows.

you can get around some of that by learning how to bake. in blender for instance you can bake shadows and lights into the textures.

environments also make a huge difference, see

4 Likes
3

wow you are right. Got it thank you!!!