Three.js加载GLTF模型不显示且无法居中问题求助

模型在Babylon Viewer中显示正常：

使用Three.js加载GLTF模型后，模型无法显示且无法居中，尝试过StackOverflow上自动居中缩放GLTF模型的方案仍未解决。加载后的效果：

以下是使用Parcel.js编写的完整代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const pathModel = new URL('../assets/ya.glb', import.meta.url);

const camera = new THREE.PerspectiveCamera( 25, window.innerWidth / window.innerHeight, 2, 8000  );

const scene = new THREE.Scene();

const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 10, 0 );
scene.add( hemiLight );

const dirLight = new THREE.DirectionalLight( 0xffffff );
dirLight.position.set( 0, 0, 10 );
scene.add( dirLight );

// instance of gltf loader
const loader = new GLTFLoader();

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
// renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0x808080)

// load my Model here
loader.load( pathModel.href, function ( gltf ) {
    scene.add(gltf.scene);
}, undefined, function ( error ) {
    console.error( error );
});

document.body.appendChild( renderer.domElement );

// animation
function animation() {
    render();
    requestAnimationFrame( animation );
}

// render all
function render() {
    renderer.render( scene, camera );
}

render();
animation();

请问是否遗漏了什么配置？

你的代码存在三个核心问题，针对性修改即可解决：

1. 相机未设置位置：默认相机位置在原点，和模型重叠，无法捕捉到画面。
2. 渲染器未设置画布尺寸：注释掉setSize导致画布没有正确占满窗口，显示异常。
3. 模型未做居中缩放处理：加载后直接添加到场景，可能因模型尺寸或位置问题超出视野。

修改后的完整代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const pathModel = new URL('../assets/ya.glb', import.meta.url);

const camera = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 2, 8000);
// 设置相机位置，确保能看到模型
camera.position.set(0, 10, 50);

const scene = new THREE.Scene();

const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
hemiLight.position.set(0, 10, 0);
scene.add(hemiLight);

const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(0, 0, 10);
scene.add(dirLight);

const loader = new GLTFLoader();

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
// 恢复画布尺寸设置
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x808080);

// 模型加载后执行居中缩放
loader.load(pathModel.href, function (gltf) {
    const model = gltf.scene;
    scene.add(model);

    // 计算模型包围盒
    const box = new THREE.Box3().setFromObject(model);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    // 模型居中
    model.position.sub(center);

    // 计算合适的缩放比例，让模型适配视野
    const maxDim = Math.max(size.x, size.y, size.z);
    const scale = 20 / maxDim; // 20为适配相机视野的基准值，可按需调整
    model.scale.multiplyScalar(scale);

    // 确保相机看向模型中心
    camera.lookAt(center);
}, undefined, function (error) {
    console.error(error);
});

document.body.appendChild(renderer.domElement);

// 添加窗口resize事件处理，保持画面适配
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

function animation() {
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
}

animation();

关键修改说明： #

• 给相机设置了明确的位置，并在模型加载后让相机看向模型中心
• 恢复了渲染器的setSize配置，并添加了窗口 resize 监听，保证画面自适应
• 通过计算模型包围盒，实现模型自动居中，并按比例缩放至合适尺寸

内容的提问来源于stack exchange，提问作者iuer ui