GLTF Model quality loss

Questions
1

Hello guys!
I am starting in Three.js and I have encountered my first real issue.
I am trying to add a 3D model to my scene (I am using the GLFT Loader), but I have a big loss in the quality of the model.

Here is the model that I am using in a glTF viewer

image
image908Ă—556 21.7 KB

And here is my version of the model in my scene
image
image752Ă—487 17.1 KB

(here is the model if it can help: Retro computer - Download Free 3D model by Damla Yagli (@ddamlayagli) [8f2fb15] - Sketchfab)

I know that my lighting is not good for the moment, but I think that this is not my current problem, my model looks pixelated and I don’t think it is light-related.

Here is my renderer implementation

 this.scene = new THREE.Scene();
 this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 this.renderer = new THREE.WebGLRenderer();
 this.renderer.setSize(window.innerWidth, window.innerHeight);
 document.body.appendChild(this.renderer.domElement);

 const ambientLight = new THREE.AmbientLight(0xffffff, 1);
 this.scene.add(ambientLight);
 const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
 directionalLight.position.set(1, 1, 1);
 this.scene.add(directionalLight);

And here is my model importation

 const glftLoader = new THREE.GLTFLoader();
 glftLoader.load('./models/new_retro_computer/scene.gltf', (gltfScene) => {
  gltfScene.scene.position.z = settings.platformLength / 2 + 8;
  gltfScene.scene.scale.set(2, 2, 2);
  settings.scene.add(gltfScene.scene);
 });

I tried a ToneMapping but the result was still the same so I am a bit lost here :sweat_smile:

Also a subsidiary question: in some online model viewers the light seems to always highlight the model so I was thinking of “sticking” my directionalLight to the camera to always put light where the user is looking but I don’t know if it’s a “normal” way to do it.

Thanks for your future answers :grin:

2

Is there an .environment set in the scene? Otherwise PBR materials (ex. GLTFs default MeshStandardMaterial), will not render properly as there’s no indirect lighting for them to reflect.

2 Likes
3

check material.metalnes set to 0

obj.traverse((child) => {
            if (child.isMesh && child.material && child.material.isMaterial) {
               child.material.metalness=0;
            }
        });
4

I didn’t have an environment in my scene, so I add this part

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);

const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
const envMapTexture = pmremGenerator.fromScene(new THREE.Scene());
this.scene.environment = envMapTexture.texture;
pmremGenerator.dispose();

But my result looks the same

image
image1264Ă—732 25 KB

5

I tried adding this in my model loading

const glftLoader = new THREE.GLTFLoader();
    glftLoader.load('./models/new_retro_computer/scene.gltf', (gltfScene) => {
        // Set position and scale of the model
        gltfScene.scene.position.z = settings.platformLength / 2 + 8;
        gltfScene.scene.scale.set(2, 2, 2);

        // Add material metalness check
        gltfScene.scene.traverse((child) => {
        if (child.isMesh && child.material && child.material.isMaterial) {
            //console.log('metalnes');
            child.material.metalness = 0;
        }
        });

But it seems that the child.material.metalness = 0 is never called so my metalnes seem good :thinking:

6

This won’t work, an empty scene doesn’t contribute any sort of lighting or reflections. Instead try with the built-in RoomEnvironment scene, as you see here …

… or load your own .hdr or .exr environment map texture.

For the pixelated edges, you may also want to enable the antialias: true option in your WebGLRenderer constructor.

3 Likes
7

Thank you so much :laughing:
It really was the antialias option that was causing my problem.
This fix my problem

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.rendererSettings = {
   antialias: true,
   alpha: true,
   powerPreference: "high-performance"
};
this.renderer = new THREE.WebGLRenderer(this.rendererSettings);
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(this.renderer.domElement);
1 Like
8

And perhaps change the name of glftLoader to gltfLoader? This will reduce the risk of some interesting/maddening error notices as your program grows.