在Three.js中自动居中和调整GLTF模型的大小

Question

从sketchfab.com下载3D模型并将其导入Three.js场景后，它们大多数时候都没有居中，并且尺寸很大。

有没有一种方法可以使用脚本或软件（在Linux上运行）自动对gltf模型进行定中心和缩放，或者以其他方式在Three.js中即时进行设置，并使用OrbitControls使摄像机在对象周围移动。

Answer 1

是的。此代码采用一个节点并找到其大小和中心点，然后对其进行重新缩放，使其最大范围为 1，并以 0,0,0 为中心，并在 y 轴上高于地面。

    var mroot = yourScene;
    var bbox = new THREE.Box3().setFromObject(mroot);
    var cent = bbox.getCenter(new THREE.Vector3());
    var size = bbox.getSize(new THREE.Vector3());

    //Rescale the object to normalized space
    var maxAxis = Math.max(size.x, size.y, size.z);
    mroot.scale.multiplyScalar(1.0 / maxAxis);
    bbox.setFromObject(mroot);
    bbox.getCenter(cent);
    bbox.getSize(size);
    //Reposition to 0,halfY,0
    mroot.position.copy(cent).multiplyScalar(-1);
    mroot.position.y-= (size.y * 0.5);

Answer 2

var loader = new THREE.GLTFLoader();
loader.load( 'models/yourmodel.gltf', 
function ( gltf ) {
    gltf.scene.traverse( function ( child ) {
        if ( child.isMesh ) {
            child.geometry.center(); // center here
        }
    });
    gltf.scene.scale.set(10,10,10) // scale here
    scene.add( gltf.scene );
}, (xhr) => xhr, ( err ) => console.error( e ));

要在对象周围移动，请使用 controls.target() https://threejs.org/docs/#examples/controls/OrbitControls.target