THREEJS 將構件縮放至視野中的方法

陳東民發表於2023-01-09
JS

概述

只將某個物體縮放至整個螢幕， 十分常見的應用場景，這和相機視野有關，需要分透視相機和正交相機來分別說明。

透視相機

首先假定物體被相機視野覆蓋，有如下圖

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));

用途: 製作小地圖

相關文章