THREEJS - 模型居中

在使用THREEJS的过程中,我们常常会遇到关于模型的处理,有时候建模的同事会帮我们将模型归零后给我们,有时候是没有归零的,但这时候需要将模型在场景中居中展示。

这里采用的办法是包围盒的方式,具体代码如下:

// 将模型的中心点设置到canvas坐标系的中心点,保证模型显示是居中的,object就是操作的目标模型
let box = new THREE.Box3().setFromObject(object); // 获取模型的包围盒
let mdlen = box.max.x - box.min.x; // 模型长度
let mdwid = box.max.z - box.min.z; // 模型宽度
let mdhei = box.max.y - box.min.y; // 模型高度
let x1 = box.min.x + mdlen / 2; // 模型中心点坐标X
let y1 = box.min.y + mdhei / 2; // 模型中心点坐标Y
let z1 = box.min.z + mdwid / 2; // 模型中心点坐标Z
object.position.set(-x1, -y1, -z1); // 将模型进行偏移

上述的办法是将模型至于场景坐标系的原点。

但是呢,这样只是将模型展示在场景坐标系的原点,但是还不能完全自动的将模型完完全全的展示在我们的视角中,下一篇博客将为大家解决这个问题,模型展示在坐标系原点的同时,让模型以我们想要的视角展示在视线范围内;

你可能感兴趣的:(THREEJS,three.js,javascript)