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();
}