# How to correctly display the materials of gltf?

**URL:** <https://discourse.threejs.org/t/how-to-correctly-display-the-materials-of-gltf/56116>\
**Category:** Questions\
**Tags:** materials\
**Created:** [September 18, 2023, 10:25am UTC](https://discourse.threejs.org/t/how-to-correctly-display-the-materials-of-gltf/56116 "2023-09-18T10:25:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hhblack](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@hhblack](https://discourse.threejs.org/u/hhblack)\
**Post date:** [September 18, 2023, 10:25am UTC](https://discourse.threejs.org/t/how-to-correctly-display-the-materials-of-gltf/56116/1 "2023-09-18T10:25:09Z")

</div>

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](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/d/fded81302a90672e44c0eaf54602a2c8bd9c6fa3.jpeg)

and here is what I got in 3JS  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/a/5a95b636c8f1ad16ab5ecfb4d3713bedc0eb5baf.png)

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

```javascript
        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](https://discourse.threejs.org/uploads/short-url/bLV4LqvuZKTjamDc3iU08HLPwtl.glb) (113.5 KB)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [September 18, 2023, 12:33pm UTC](https://discourse.threejs.org/t/how-to-correctly-display-the-materials-of-gltf/56116/2 "2023-09-18T12:33:26Z")

</div>

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

> <https://twitter.com/0xca0a/status/1625177704323596305>

---

<div class="post-metadata">

**Author:** ![hhblack](https://avatars.discourse-cdn.com/v4/letter/h/df788c/32.png) [@hhblack](https://discourse.threejs.org/u/hhblack)\
**Post date:** [September 19, 2023, 10:46am UTC](https://discourse.threejs.org/t/how-to-correctly-display-the-materials-of-gltf/56116/3 "2023-09-19T10:46:22Z")

</div>

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