科普篇
最近有个朋友工作中需要用到 three.js,遇到了这个问题,模型文件没问题,也不报错,可就是渲染不出来图像…写这篇文章科普一下。
包围盒简介
包围盒是一种求解离散点集最优包围空间的算法,基本思想是用体积稍大且特性简单的几何体(称为包围盒)来近似地代替复杂的几何对象。常见的包围盒算法有 AABB 包围盒、包围球、方向包围盒 OBB 以及固定方向凸包 FDH。碰撞检测问题在虚拟现实、计算机辅助设计与制造、游戏及机器人等领域有着广泛的应用,甚至成为关键技术。而包围盒算法是进行碰撞干涉初步检测的重要方法之一。
来自百度百科
three.js 中的 Box3 是 AABB 包围盒。。。
方法
简述
我们加载一个模型后,获取模型的包围盒,然后设置相机看向包围盒中心,再设置相机相对于包围盒中心偏移一定的位置。
这里是我从自己之前的项目中剪切部分出来的部分代码,做了一些注释和修改,方便大家理解…
设置相机位置
1 | var box = new THREE.Box3(); |
朋友还想知道如何动态设置相机取景范围。简单讲解下动态确定 near、far。。。很简单嘛,算出包围盒的尺寸,也就 box.max-box.min 得到一个向量,取向量的长度。然后乘以因数来设置。
设置相机 far、near(取景范围)
1 | var box = new THREE.Box3(); |