webgl – Load original lighting for glTF 3D models using three.js like sketchfab.com or windows 3D Viewer
I am facing issue in 3D Modeling.
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.
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();
}
Read more here: Source link