3D Model Appearance is not good

Questions
1

Hi ,

I am rendering a 3D model using MTL/OBJ loader. But Model appearence is not so good as compared to sketchfab. I have uploaded same 3d model in sketchfab but there after rendering 3D model looks quite smooth and good but same is not happening in my case. Please refer below screenshots of 3d model for both cases i have mentioned above and the code snippet.

My Model:

my model

Sketchfab Model:

sketchfab model

Code Snippet:

    this.container = document.getElementById("threedViewer");
    this.rendererW = this.container.offsetWidth;
    this.rendererH = 680;

    /* Scene */
    this.scene = new THREE.Scene();

    /* Camera */
    this.camera = new THREE.PerspectiveCamera(70, this.rendererW / this.rendererH, 0.1, 7000);
    this.camera.up.set(0, 0, 1);
    this.camera.position.set(-5, -1500, -130);
    this.scene.add(this.camera);


    //Ambient LIGHTING
    this.ambient = new THREE.AmbientLight(0x404040);
    this.scene.add(this.ambient);

    //Hemisphere LIGHTING
    this.hemiLight = new THREE.HemisphereLight(new THREE.Color('hsl(0, 0%, 10%)'), new THREE.Color('hsl(0, 0%, 50%)'), .1);
    this.hemiLight.intensity = 150;
    this.scene.add(this.hemiLight);

    var manager = new THREE.LoadingManager();

    manager.onStart = function (item, loaded, total) {
        console.log('Loading started');
    };

    manager.onLoad = function () {
        console.log('Loading complete');
        scope.get3DAnnotations(scope.missionId);
        bar.destroy();
    };

    manager.onProgress = function (item, loaded, total) {            
        console.log(item, loaded, total);
        console.log('Loaded:', Math.round(loaded / total * 100, 2) + '%')
        bar.animate(loaded / total);
    };

    manager.onError = function (url) {
        console.log('Error loading');
    };       
           
    //3D MTL & Object Loading
    var mtlLoader = new MTLLoader(manager);
    var mtl = this.missionUploads.find(this.findUpload.bind(this, 'MTL'));
    var objfile = this.missionUploads.find(this.findUpload.bind(this, 'OBJ'));
    mtlLoader.setPath('media/' + this.missionId + '/3D/Mesh OBJ/');
    mtlLoader.load(mtl.FileName, function(materials) {

        materials.preload();
        materials.materials.texture.map.magFilter = THREE.NearestFilter;
        materials.materials.texture.map.minFilter = THREE.LinearFilter;

        //var manager = new THREE.LoadingManager();
        OBJLoader(THREE);
        var objLoader = new THREE.OBJLoader(manager);
        objLoader.setMaterials(materials);
       
        objLoader.setPath('media/' + scope.missionId + '/3D/Mesh OBJ/');
        objLoader.load(objfile.FileName, function (object) {

            object.traverse(function(child) {
                if (child instanceof THREE.Mesh) {                       
                    scope.objects.push(child);
                }
            });

            object.up.set(0, 0, 1);
            scope.scene.add(object);
            console.log('Object::', object);
        });

    });

    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2();
  
    /* Renderer */

    this.renderer = new THREE.WebGLRenderer();
    this.renderer.physicallyCorrectLights = true;
    this.renderer.gammaInput = true;
    this.renderer.gammaOutput = true;
    this.renderer.shadowMap.enabled = true;
    this.renderer.toneMapping = THREE.ReinhardToneMapping;
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(this.rendererW, this.rendererH);
    this.renderer.setClearColor(scope.threedSettings.renderer.background);

    this.container.appendChild(this.renderer.domElement);

    /* Controls */
    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.25;
    this.controls.enableZoom = true;       
    //this.get3DAnnotations(scope.missionId);
    /* Events */
    var self = this;
    document.addEventListener('dblclick', function() { scope.onDocumentMouseDown(event, self); }, false);
    document.addEventListener('resize', this.onWindowResize, false);
    this.container.addEventListener('click', function() { scope.showAnnotationDetails(event, self); }, false);
}

animate() {
    requestAnimationFrame(this.animate.bind(this));
    this.controls.update();        
    this.render();
}

render() {
    this.renderer.toneMappingExposure = Math.pow(.68, 5.0); // to allow for very bright scenes.
    this.renderer.shadowMap.enabled = true;        
    this.renderer.render(this.scene, this.camera);
}

Other Issue is, in sketchfab model, its inner side is filled which gives this a 3D look but in my case, my model inner area is transparent if you look inside. Please refer below screenshot for this case.

My Model:

my inner model

sketchfab Model:

sketchfab inner model

Please Help.

Thanks
Avinash

2

With regards to Sketchfab quality, three.js works in a very different way but you will be able to get the same level of quality. You just have to do it yourself, setting up lights and shadows and perhaps postprocessing. Sketchfab automates all of this.

With regards to transparent underside of your model in three.js, try setting all of your materials to double sided.

3

Hey Looeee, Thanks a lot for all your support. Sorry for asking lot of questions in a single thread.

I have a quick question here, each model is different than other ,then in that case how we can make sure that any model that we are rendering, will have same set of settings for display & look and feel i.e. each model should be display in similar fashion.
Also what do you mean by post processing? What we can do in this section ? Is this a kind of an event that gets execute before rendering?

4

With regards to post processing, have a look through the examples here:

https://threejs.org/examples/?q=postprocessing

5

As far as the lighting is concerned I ended up with a similar issue on a model generated via a photogrammetry program, the fix that worked the best of me was to use only the ambient light, any other lighting messed it up royally.