Three.js的gltf模型自动居中

threejs的gltf模型居中

在使用第三方模型的时候，总有一些不尽人意的地方，比如模型加载后，模型中心并不在3d世界的中心位置，所以就需要调整一下模型整体的位置

// 获取包围盒
getBoxInfo(mesh) {
    const box3 = new THREE.Box3()
    box3.expandByObject(mesh)
    const size = new THREE.Vector3()
    const center = new THREE.Vector3()
    // 获取包围盒的中心点和尺寸
    box3.getCenter(center)
    box3.getSize(size)
    return {
        size, center
    }
}
toSceneCenter(mesh) {
    const { center, size } = this.getBoxInfo(mesh)
    // 将Y轴置为0
    mesh.position.copy(center.negate().setY(0))
}
...
// 使用
toSceneCenter(group)

toSceneCenter 方法是自定义的一个让模型居中的方法，通过# Box3获取到模型的包围盒，获取到模型的中心点坐标信息，再取反，就会得到模型中心点在3d世界的位置信息。