THREEJS - 模型的任意视角展示

上一篇博客我们提到了任意模型加载的居中的解决办法，但是呢，细心的同学会发现，模型虽然居中了，但是模型的大小我们比较难以控制，可能会导致模型加载时，展示在场景中或大或小，这时候我们就需要设定一下模型的展示视角。

在说方法前，我们先来说明一下另一个概念：orbitContorl。这个控制器是用来控制模型在场景中的展示，可以通过鼠标控制实现我们想要的效果，但是orbitCotrol内置属性中，会影响到我们创建场景中的camera的设定，此时如果需要改变相机的位置和视角时，我们需要用下面这个办法：

orbit.object.position.set(1, 1, 1); // 设置相机的位置
orbit.target.set(0, 0, 0); // 设置相机所看的目标位置

明白了控制器的控制冲突解决办法后，我们来看一下如何在加载模型时，以一个合适的视角初始化：（这里会用到前文设定模型中心的办法）

// 将模型的中心点设置到canvas坐标系的中心点，保证模型显示是居中的
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
let diagonal = Math.sqrt(Math.pow(Math.sqrt(Math.pow(mdlen, 2) + Math.pow(mdwid, 2)), 2) + Math.pow(mdhei, 2)); // 获取模型整体对角线长度,这里获取模型模型对角线的目的是为了保证模型可以完全的展示在视线范围内
// 假设我们需要的进入视角为45度
orbit.object.position.set(box.max.x + diagonal / 2, (diagonal * 2) / Math.tan(Math.PI / 180 * 45) + Math.abs(box.max.y), box.max.z + diagonal / 2); // 设置相机位置，向上偏移，确定可以包裹整个模型
orbit.target.set(x1, y1, z1); // 设置相机的视角方向，看向模型的中心点
orbit.update(); // 更新相机

这就是模型展示视角的办法，可以根据自己的实际需要，修改进入的视角。