根据模型动态设置相机位置

科普篇

最近有个朋友工作中需要用到 three.js，遇到了这个问题，模型文件没问题，也不报错，可就是渲染不出来图像…写这篇文章科普一下。

---

包围盒简介

包围盒是一种求解离散点集最优包围空间的算法，基本思想是用体积稍大且特性简单的几何体（称为包围盒）来近似地代替复杂的几何对象。常见的包围盒算法有 AABB 包围盒、包围球、方向包围盒 OBB 以及固定方向凸包 FDH。碰撞检测问题在虚拟现实、计算机辅助设计与制造、游戏及机器人等领域有着广泛的应用，甚至成为关键技术。而包围盒算法是进行碰撞干涉初步检测的重要方法之一。

来自百度百科

three.js 中的 Box3 是 AABB 包围盒。。。

方法

简述

我们加载一个模型后，获取模型的包围盒，然后设置相机看向包围盒中心，再设置相机相对于包围盒中心偏移一定的位置。

---

这里是我从自己之前的项目中剪切部分出来的部分代码，做了一些注释和修改，方便大家理解…

设置相机位置

var box = new THREE.Box3();
// model是你的加载的模型对象，当然你也可以直接用scene
box.setFromObject(model);
// scale 用来调整距离
var scale = 2.5;
var size = new THREE.Vector3();
box.getSize(size);
var length = size.length() * scale;
// 设置一个方向向量，用来将相机放置在模型的哪个方位。。。我们这里设置为(1,1,1)模型的右上前
var dir = new THREE.Vector3(1, 1, 1).normalize();
var target = new THREE.Vector3();
box.getCenter(target);
camera.position.copy(dir).multiplyScalar(length).add(target);
camera.lookAt(target);

---

朋友还想知道如何动态设置相机取景范围。简单讲解下动态确定 near、far。。。很简单嘛，算出包围盒的尺寸，也就 box.max-box.min 得到一个向量，取向量的长度。然后乘以因数来设置。

设置相机 far、near（取景范围）

var box = new THREE.Box3();
// model是你的加载的模型对象，当然你也可以直接用scene
box.setFromObject(model);
var size = new THREE.Vector3();
box.getSize(size);
var length = size.length();
camera.far = length * 6;
camera.near = length * 0.01;
camera.updateProjectionMatrix();