three.js 模型 居中
物体不居中
模型的几何中心位置不对, 设置偏离物体实际几何中心,当设置position(0,0,0)时就会出现偏离。

解决方案
此处有两种解决方案
- 建模师处理模型,将模型的几何中心移动到(0, 0, 0)
- 使用代码进行模型强制居中处理
// 重置几何中心 模型居中 对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();// }// })