Three.js加载模型自动居中
Three.js加载模型自动居中
Three.js加载模型自动居中
概述
若有帮助到你,麻烦点一波关注,博主会持续推出Echarts,D3,地图,Three.js方面的文章~~~
有时会出现这样得场景,在加载模型成功后,在场景中很难找到模型具体加载到了哪个位置,我们在打印出模型后可以看到模型得定位是(0,0,0),但加载的模型并不是在(0, 0, 0)位置,这是由于建模师在处理模型的时候就不是在(0, 0, 0)处进行建模的。
效果演示
可看到在没有调用setModelPosition()函数时模型时不在原点的,调用之后自动计算定位到原点。
解决方案
此处有两种解决方案
- 建模师处理模型,将模型的位置移动到(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;
}