How to improve quality of gltf/fbx 3d models similar to three js GLTF viewer or sketchfab

Questions
, ,
1

how to improve the quality using lights. i have downloaded the 3d gltf from https://sketchfab.com/3d-models/rock-jacket-mid-poly-25711a832a344c2dbe0b592c9d98707b
i tried rendering the image in my local setup and it is not looking quality wise good. how to improve it. everytime i try rendering different 3d models in same code, its quality and look wise differs how to fix it???
this is how it should look ( https://gltf-viewer.donmccurdy.com/) ::

3jsViewer
3jsViewer957×575 150 KB

this how it is rendering in my local setup:

modelGLTF
modelGLTF696×420 77 KB

Code i tried:

      const ambientLight = new THREE.AmbientLight(0xffffff, 0.53);
         this.scene.add(ambientLight);
         const lightProbe = new THREE.LightProbe();
         this.scene.add(lightProbe);
         const directionalLight1 = new THREE.DirectionalLight(0xffffff, 3);
         directionalLight1.position.set(10, 10, 10);
         this.scene.add(directionalLight1);
         const directionalLight2 = new THREE.DirectionalLight(0xffffff, 3);
         directionalLight2.position.set(0, -10, 0);
         this.scene.add(directionalLight2);
         const directionalLight3 = new THREE.DirectionalLight(0xffffff, 3);
         directionalLight3.position.set(0, 0, 0);
         this.scene.add(directionalLight3);
   //gltf loading
    var loader = new GLTFLoader();
    var dracoLoader = new DRACOLoader();
    DRACOLoader.setDecoderPath("draco/gltf/");
    loader.setDRACOLoader( dracoLoader );
    loader.load('rock/scene.gltf', gltf => {
        gltf.scene.traverse( function ( child ) {
            if ( child instanceof THREE.Mesh ) {
                  child.geometry.computeFaceNormals();
                  child.geometry.computeVertexNormals();
                  child.material.side = THREE.DoubleSide;
                  // child.material.shading = THREE.SmoothShading;
                }
            });
    var box = new THREE.Box3();
    box.setFromObject(gltf.scene);
    var size = new THREE.Vector3();
    box.getSize(size);
    var center = new THREE.Vector3();
    box.getCenter(center);
    var scale =this.desiredHeight / size.y;
    gltf.scene.scale.setScalar(scale);
    gltf.scene.position.sub(center.multiplyScalar(scale));
    this.scene.add(gltf.scene);
    this.renderer.setSize( this.width, this.height );
    this.renderer.render( this.scene, this.camera );
    this.renderer.gammaOutput = true;
    this.renderer.gammaInput = true;
    this.mount.appendChild( this.renderer.domElement );
  });
2

An environment map (or image-based lighting) would be a good place to start. See this example for how to set that up: https://threejs.org/examples/?q=gltf#webgl_loader_gltf

2 Likes
4

The gltf-viewer source code is very readable. You can see how lights and environment maps are set up here:

2 Likes
5

thanks… i tried this, gltf is rendering , fbx and obj is not rendering after changing the loader. this https://threejs.org/examples/?q=gltf#webgl_loader_gltf code will work for fbx and obj too right??

6

Any solution to this ? we are also looking for ways to looks models look great using three.js

7

@Tushar_Sharma Great visual results require a good model and good lighting. You’ll need to share something about what you’re doing now (code and demo are best) if you want feedback to improve your current results. If you need somewhere to start, the source code at https://github.com/donmccurdy/three-gltf-viewer may be helpful.

8

this really looks like you’re not using any environment map. Why don’t you make a metal shiny sphere next to the jacket and see if you get any reflections?

Also, wow, besides being a very very well made model, it has a doom patch :smiley: crust punx ftw

1 Like
9

@Tushar_Sharma as suggested by donmccurdy , i took the code from https://github.com/donmccurdy/three-gltf-viewer bit helpful.