使用诸如sketchfab.com 或windows 3D Viewer 之类的three.js 为glTF 3D 模型加载原始光照答案

【问题标题】：Load original lighting for glTF 3D models using three.js like sketchfab.com or windows 3D Viewer使用诸如sketchfab.com 或windows 3D Viewer 之类的three.js 为glTF 3D 模型加载原始光照
【发布时间】：2021-09-27 07:52:14
【问题描述】：

我在 3D 建模方面遇到问题。

为每个 glTF 3D 模型选择和调整灯光。 最初，我的模型看起来很暗。但我不想为每个 3D 模型手动选择灯光设置。我想知道有什么方法可以像sketchfab.com 或windows 3D Viewer 那样自动应用灯光。在此类应用中打开 3D 模型时无需调整或选择灯光。

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

【问题讨论】：

标签： three.js webgl gltf 3d-modelling 3d-model

【解决方案1】：

我以前遇到过这个问题。我的解决方案是 Image-Based Lighting，它似乎用于多个在线开源模型查看器。

Don McCurdy's glTF Viewer 应该会有所帮助。

查看者的来源位于here。注意PMREMGenerator和Scene.environment的用法。

这可能无法解决你所有的问题，但值得一试:)

【讨论】：