cguser

计算机图形学应用 | 张盼的博客

0%

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

科普篇

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


包围盒简介

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

来自百度百科

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

方法

简述

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


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

设置相机位置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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(取景范围)

1
2
3
4
5
6
7
8
9
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();