关于three.js:THREEJS-将构件缩放至视野中的方法

概述

只将某个物体缩放至整个屏幕，非常常见的利用场景，这和相机视线无关，须要分透视相机和正交相机来别离阐明。

透视相机

首先假设物体被相机视线笼罩，有如下图

首先必须晓得物体所在的突围球半径 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));

用处: 制作小地图