Three.js加载模型自动居中

Three.js加载模型自动居中

• Three.js加载模型自动居中
• • 概述
  • 效果演示
  • 解决方案

Three.js加载模型自动居中

概述

若有帮助到你，麻烦点一波关注，博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
有时会出现这样得场景，在加载模型成功后，在场景中很难找到模型具体加载到了哪个位置，我们在打印出模型后可以看到模型得定位是(0,0,0)，但加载的模型并不是在(0, 0, 0)位置，这是由于建模师在处理模型的时候就不是在(0, 0, 0)处进行建模的。

效果演示

可看到在没有调用setModelPosition()函数时模型时不在原点的，调用之后自动计算定位到原点。

解决方案

此处有两种解决方案

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

/**
 * 设置加载模型居中
 * {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;
}