Three.js加载模型自动居中

在加载模型成功后,模型不在场景中间位置,我们在打印出模型后可以看到模型得定位是(0,0,0),但加载的模型并不是在(0, 0, 0)位置,这是由于建模师在处理模型的时候就不是在(0, 0, 0)处进行建模的。

解决方案

此处有两种解决方案


建模师处理模型,将模型的位置移动到(0, 0, 0)处即可

使用代码进行模型强制居中处理

/**
 * 设置加载模型居中
 * {Object} object 模型对象
*/
funciton setModelPosition(object) { 
	object.updateMatrixWorld();
	// 获得包围盒得min和max
    const box = new THREE.Box3().setFromObject(object);
    // 返回包围盒的宽度,高度,和深度
    const boxSize = box.getSize();
    // 返回包围盒的中心点
    const center = box.getCenter(new THREE.Vector3());
    object.position.x += object.position.x - center.x;
    object.position.y += object.position.y - center.y; 
    object.position.z += object.position.z - center.z;
}