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世界的位置信息。