three.js 模型 居中

物体不居中

模型的几何中心位置不对， 设置偏离物体实际几何中心，当设置position（0,0,0）时就会出现偏离。

解决方案

此处有两种解决方案

1. 建模师处理模型，将模型的几何中心移动到（0， 0， 0）
2. 使用代码进行模型强制居中处理

// 重置几何中心  模型居中  对group、mesh都可使用
 let box = new THREE.Box3();
 // box.expandByObject(this.model);
 box.expandByObject(this.model);
 // console.log('查看包围盒box3', box);
 //scaleV3表示包围盒长宽高尺寸
 let scaleV3 = new THREE.Vector3();
 // .getSize()计算包围盒长宽高尺寸
 box.getSize(scaleV3)
 // 查看控制台包围盒大小，辅助设置相机参数
 // console.log('查看包围盒尺寸', scaleV3);
 //scaleV3表示包围盒的几何体中心
 let center = new THREE.Vector3();
 // .getCenter()计算一个层级模型对应包围盒的几何体中心
 box.getCenter(center);
 // 查看控制台包围盒集合中心，作为lookAt()参数
 // console.log('查看几何中心', center);
this.model.position.set(-center.x,-center.y,-center.z)
 // 单 mesh 重置几何中心
 // this.model.children.forEach(child=>{
 //     if (child instanceof THREE.Mesh){
 //         console.log(child)
 //         child.geometry.computeBoundingBox();
 //         child.geometry.center();
 //     }
 // })