Load original lighting and zoom adjustment for glTF 3D models using three.js like sketchfab.com or windows 3D Viewer

I am facing some issues in 3D Modeling.

First, one is to choose and adjust the light for every glTF 3D Model. Initially, my models look dark. But I do not want to choose light settings manually for every 3D Model. I want to know that there is any way to apply automatically light like sketchfab.com or windows 3D Viewer does. There is no need to adjust or choose the lighting while opening 3D Models in such apps.

The second one is some Models look very far away and some very near. But this is not happening in sketchfab.com or windows 3D Viewer.

function animate() {
    this.animationFrameRef = requestAnimationFrame(this.animate.bind(this));
    this.renderer.render(this.scene, this.camera);
}
    
function init() {
    let width = this.elementRef.nativeElement.clientWidth;
    let height = this.elementRef.nativeElement.clientHeight;
    this.scene = new Scene();
    this.scene.background = new Color(0xeeeeee);
    this.camera = new PerspectiveCamera(50, width / height, .1, 2000);
    this.camera.rotation.y = 45 / 180 * Math.PI;
    this.camera.position.x = 800;
    this.camera.position.y = 100;
    this.camera.position.z = 1000;
    
    this.renderer = new WebGLRenderer({ antialias: true });
    this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setSize(width, height);
    document.body.appendChild(this.renderer.domElement);
    this.controls = new OrbitControls(this.camera,this.renderer.domElement);
    
    this.controls.minDistance = 1;
    this.controls.maxDistance = 800;
    
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.05;
    
    this.controls.update();
    
    this.hlight = new AmbientLight(null);
    this.scene.add(this.hlight);
    
    this.directionalLight = new DirectionalLight(null);
    this.directionalLight.position.set(1, 1, 0);
    this.directionalLight.castShadow = true;
    
    this.scene.add(this.directionalLight);
    
    
    let loader = new GLTFLoader();
    this.isLoading = true;
    loader.load(this.model, (gltf) => {
        var box = new Box3().setFromObject(gltf.scene);
        var center = new Vector3();
        box.getCenter(center);
        gltf.scene.position.sub(center); // center the model
        this.scene.add(gltf.scene);
    }, (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    }, (event) => {});
    
    window.addEventListener('resize', this.onWindowResize.bind(this));
    this.animate();
    }

Well, you can’t compare 3D viewer applications with a plain 3D engine. You have to develop the features of a 3D viewer first.

I suggest you study the implementation of https://gltf-viewer.donmccurdy.com/ which is based on three.js, open source and also provides solution for both of your issues.

/cc