1

概述

只将某个物体缩放至整个屏幕, 十分常见的应用场景,这和相机视野有关,需要分透视相机和正交相机来分别说明。

透视相机

首先假定物体被相机视野覆盖,有如下图

image.png

首先必须知道物体所在的包围球半径 r, 其次相机角度是已知的,就是 camera.fov, fov 是角度制数据,简单根据三角函数可以得出球心到相机的距离 s。

s = r/sin(fov)

使用代码来表达就是

const dir = new THREE.Vector3(0, 1, 0); // 方向
const dist = Math.abs(sphere.radius / Math.sin(((fov / 360) * Math.PI) / 2));
const temp = new THREE.Vector3();
temp.addVectors(sphere.center, dir.multiplyScalar(dist));

正交相机

正交相机和剖切很相似,除了 position、rotation 外,使用 left、top、right、bottom 来规定视野范围

这个更加容易理解,对于屏幕都是矩形的电脑来说,这个缩放将会恰达好处(精确度高,透视相机因为用到了包围球其实不是很精确)。

const left = -(boundingBox.max.x - boundingBox.min.x) / 2;
const right = (boundingBox.max.x - boundingBox.min.x) / 2;
const top = (boundingBox.max.z - boundingBox.min.z) / 2;
const bottom = -(boundingBox.max.z - boundingBox.min.z) / 2;

const camera = new THREE.OrthographicCamera(left, right, top, bottom, 1, 1000);
camera.lookAt(new THREE.Vector3(0, -100, 0));

用途: 制作小地图


陈东民
2.1k 声望269 粉丝

坚持自我 纯粹的技术