Three.js 模型居中

Question

Threejs 通过外部数据生成的模型或者加载外部模型的时候，得到的三维模型是不居中的，希望通过 threejs 的一些方法实现居中操作。

几何体居中 .center()

如果加载的或生成的模型对象只有一个网格模型，不是多个模型对象组成的层级模型，可以通过控制网格模型模型几何体的方式居中。

// 网格模型模型的几何体居中
Mesh.geometry.center()

关于几何体 .center() 方法可以查看 threejs 文档中 BufferGeometry 或 Geometry 对几何体的介绍。

.center() 方法是基于Threejs包围盒Box3实现几何体居中。

一个模型渲染在场景中的渲染位置，一方面是

如果一个网格模型的几何体执行了 .center() 方法还没有居中，要查看下相机的方法.looAt()是否指向坐标原点，模型的.position属性值是否是Vector3(0,0,0,)。

多个模型对象居中

如果一个 threejs 三维模型有多个网格模型对象构成，这种情况不能通过执行几何体 .center() 方法实现整个模型居中，因为每个网格模型都有一个几何体。

通过 threejs 加载一个模型文件，模型可能居中也可能不居中，通过下面代码去设置 threejs 加载的任何模型居中。

/**
 * 包围盒全自动计算：模型整体居中
 */
var box3 = new THREE.Box3()
// 计算层级模型group的包围盒
// 模型group是加载一个三维模型返回的对象，包含多个网格模型
box3.expandByObject(group)
// 计算一个层级模型对应包围盒的几何体中心在世界坐标中的位置
var center = new THREE.Vector3()
box3.getCenter(center)
// console.log('查看几何体中心坐标', center);
// 重新设置模型的位置，使之居中。
group.position.x = group.position.x - center.x
group.position.y = group.position.y - center.y
group.position.z = group.position.z - center.z