Image based lighting on fbx/ draco gltf without hdr or create three-vignette-background

i want to render different format models in a single code. I want to render models with better quality similar sketchfab. different models which i have been rendering looks very dull in same lighting effects. so do image based lighting works on fbx n draco-gltf model?? how to solve the issue?? this is what i am trying not working so farr…

     this.scene.background = new THREE.Color(config.backgroundColor);
       //add light
     const ambientLight = new THREE.AmbientLight(0x404040, 2);
     this.scene.add(ambientLight);
     const lightProbe = new THREE.LightProbe();
     this.scene.add(lightProbe);
     const directionalLight1 = new THREE.DirectionalLight(0x404040, 2);
     directionalLight1.position.set(10, 10, 10);
     this.scene.add(directionalLight1);
     const directionalLight2 = new THREE.DirectionalLight(0x404040, 2);
     directionalLight2.position.set(0, -10, 0);
     this.scene.add(directionalLight2);
     const directionalLight3 = new THREE.DirectionalLight(0x404040, 2);
     directionalLight3.position.set(0, 0, 0);
     this.scene.add(directionalLight3);

    // load model
    var pmremGenerator = new PMREMGenerator( this.scene.background );
    pmremGenerator.update( this.renderer );
    var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
    pmremCubeUVPacker.update( this.renderer );
    var envMap = pmremCubeUVPacker.CubeUVRenderTarget.texture;

    var fbx= new FBXLoader();         
    fbx.load( 'model.fbx',  ( object )=> {
         object.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.material.envMap = envMap;
        }
    } );
        var box = new THREE.Box3();
        box.setFromObject(object);
        var size = new THREE.Vector3();
        box.getSize(size);
        var center = new THREE.Vector3();
        box.getCenter(center);
        var scaleTemp = new THREE.Vector3().copy(this.scaleV3).divide(size);
        var scale = Math.min(scaleTemp.x, Math.min(scaleTemp.y, scaleTemp.z));
        object.scale.setScalar(scale);
        object.position.sub(center.multiplyScalar(scale));
        this.scene.add( object );
        this.group.add(object);
    });
    pmremGenerator.dispose();
    pmremCubeUVPacker.dispose();
    this.renderer.setSize( this.width, this.height );
    this.renderer.render( this.scene, this.camera );
    this.renderer.gammaOutput = true;
    this.mount.appendChild( this.renderer.domElement );

FBXLoader does not return meshes with MeshStandardMaterial or MeshPhysicalMaterial which are required if you want use PBR materials in your app. These type of materials are necessary if you want to achieve advanced rendering quality similar to Sketchfab.

So try to traverse through your parse FBX object (you already have this code in your snippet) and replace the materials for all meshes with the mentioned ones.

1 Like