Three.js相機Camera控件知識梳理
1. 相機類型
Three.js 主要提供了兩種類型的相機：正交相機（OrthographicCamera）和透視相機（PerspectiveCamera）。
1.1 正交相機
正交相機（OrthographicCamera）使用正交投影進行渲染。在正交投影中，物體的大小不會隨著距離的增加而減小，這意味著所有物體在渲染時保持相同的尺寸，不受距離的影響。這種相機在制作 2D 游戲和 CAD 工具等應用中非常有用。
創(chuàng)建正交相機的代碼如下：
const camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far); // 正投影相機案例 const width = window.innerWidth; //canvas畫布寬度 const height = window.innerHeight; //canvas畫布高度 const k = width / height; //canvas畫布寬高比 const s = 600;//控制left, right, top, bottom范圍大小 const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 8000);
| 參數(shù)(屬性) | 含義 |
|---|---|
| left | 渲染空間的左邊界 |
| right | 渲染空間的右邊界 |
| top | 渲染空間的上邊界 |
| bottom | 渲染空間的下邊界 |
| near | near屬性表示的是從距離相機多遠的位置開始渲染，一般情況會設置一個很小的值。 默認值0.1 |
| far | far屬性表示的是距離相機多遠的位置截止渲染，如果設置的值偏小小，會有部分場景看不到。 默認值2000 |
1.2 透視相機
透視相機（PerspectiveCamera）使用透視投影進行渲染。在透視投影中，物體的大小會隨著距離的增加而減小，這使得遠離相機的物體看起來更小，符合現(xiàn)實世界中的透視效果。這種相機在制作 3D 游戲和仿真應用中非常常見。
創(chuàng)建透視相機的代碼如下：
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far); //透視相機案例 // width和height用來設置Three.js輸出的Canvas畫布尺寸(像素px) const width = 800; //寬度 const height = 500; //高度 // 30:視場角度, width / height:Canvas畫布寬高比, 1:近裁截面, 3000：遠裁截面 const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
| 參數(shù) | 含義 |
|---|---|
| fov | 相機視錐體豎直方向視野角度 |
| aspect | 相機視錐體水平方向和豎直方向長度比，一般設置為Canvas畫布寬高比width / height |
| near | 相機視錐體近裁截面相對相機距離 |
| far | 相機視錐體遠裁截面相對相機距離，far-near構成了視錐體高度方向 |
2. 相機屬性
Three.js 中的相機具有一些基本屬性，這些屬性決定了相機的視角和視野。
2.1 視角（FOV）
僅透視相機具有視角屬性（FOV）。視角表示相機的垂直視野范圍，單位為度。較大的視角值會導致更大的視野，但可能會產生畸變。較小的視角值則會產生更窄的視野和更低的畸變。
2.2 寬高比（Aspect）
僅透視相機具有寬高比屬性。寬高比表示相機水平視野范圍與垂直視野范圍的比值。通常，寬高比應該與渲染目標（如 Canvas 或 WebGLRenderTarget）的寬高比相同，以避免圖像被拉伸或壓縮。
2.3 近裁剪面（Near）和遠裁剪面（Far）
近裁剪面和遠裁剪面定義了相機的渲染范圍。位于近裁剪面之前的物體和位于遠裁剪面之后的物體都不會被渲染。為了提高渲染性能，通常應該盡量將近裁剪面和遠裁剪面之間的距離設置得較小。
3. 不同方向的投影視圖
3.1 x軸方向觀察
// 通過UI按鈕改變相機觀察角度
document.getElementById('x').addEventListener('click', function () {
camera.position.set(500, 0, 0); //x軸方向觀察
camera.lookAt(0, 0, 0); //重新計算相機視線方向
})3.2 y軸方向觀察
// 通過UI按鈕改變相機觀察角度
document.getElementById('y').addEventListener('click', function () {
camera.position.set(0, 500, 0); //y軸方向觀察
camera.lookAt(0, 0, 0); //重新計算相機視線方向
})3.3 z軸方向觀察z軸方向觀察
// 通過UI按鈕改變相機觀察角度
document.getElementById('z').addEventListener('click', function () {
camera.position.set(0, 0, 500); //z軸方向觀察
camera.lookAt(0, 0, 0); //重新計算相機視線方向
})4. 相機動畫(.position和.lookAt())
通過相機對象Camera的.position屬性和.lookAt()方法，可實現(xiàn)一段相機動畫。
4.1 相機運動動畫
改變相機的位置.position，三維場景在canvas畫布上呈現(xiàn)不同的效果，如果連續(xù)改變相機的位置.position，就可以獲得一個動畫效果。
課件案例源碼是一個工廠模型，相機在空中俯視工廠，如果在渲染循環(huán)中不停地改變相機位置，這時候產生的視覺效果，就好比你在天上運動，看地面的效果。
// 渲染循環(huán)
function render() {
camera.position.z -= 0.3;//相機直線運動動畫
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();4.2 相機圓周運動相機圓周運動
在渲染循環(huán)中，改變相機位置，在XOZ平面上繞著y軸圓周運動。
// 渲染循環(huán)
let angle = 0; //用于圓周運動計算的角度值
const R = 100; //相機圓周運動的半徑
function render() {
angle += 0.01;
// 相機y坐標不變，在XOZ平面上做圓周運動
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
renderer.render(scene, camera);
requestAnimationFrame(render);
}
render();4.3 執(zhí)行l(wèi)ookAt()計算相機視線方向
改變.position屬性后，如果不執(zhí)行.lookAt()方法，相機的觀察方向默認不變。
如果你希望相機圓周運動的同時，改變相機視線方向，保持相機鏡頭始終指向坐標原點或其它位置，需要每次改變.position屬性后，重新執(zhí)行一遍.lookAt()方法
function render() {
angle += 0.01;
camera.position.x = R * Math.cos(angle);
camera.position.z = R * Math.sin(angle);
// .position改變，重新執(zhí)行l(wèi)ookAt(0,0,0)計算相機視線方向
camera.lookAt(0,0,0);
requestAnimationFrame(render);
}
render();5. 相機控件OrbitControls
通常需要為用戶提供一種直觀的方式來瀏覽和操作場景。OrbitControls 是 Three.js 提供的一種常用的相機控制器，允許用戶通過鼠標或觸摸屏操作來旋轉、平移和縮放場景。
5.1 OrbitControls使用
- 旋轉：拖動鼠標左鍵
- 縮放：滾動鼠標中鍵
- 平移：拖動鼠標右鍵
OrbitControls本質上就是改變相機的參數(shù)，比如相機的位置屬性，改變相機位置也可以改變相機拍照場景中模型的角度，實現(xiàn)模型的360度旋轉預覽效果，改變透視投影相機距離模型的距離，就可以改變相機能看到的視野范圍。
// 引入軌道控制器擴展庫OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 設置相機控件軌道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
// 如果OrbitControls改變了相機參數(shù)，重新調用渲染器渲染三維場景
controls.addEventListener('change', function () {
renderer.render(scene, camera); //執(zhí)行渲染操作
console.log('camera.position',camera.position);
});//監(jiān)聽鼠標、鍵盤事件
//相關限制方法：
controls.enablePan = false; //禁止平移
controls.enableZoom = false;//禁止縮放
controls.enableRotate = false; //禁止旋轉
// 縮放范圍
controls.minZoom = 0.5;
controls.maxZoom = 2;
// 上下旋轉范圍
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI/2;
// 左右旋轉范圍
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;
//更新方法
function animate() {
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 渲染場景
renderer.render(scene, camera);
}6. 相機控件MapControls
在某些 Three.js 應用中，例如地圖、地形或者 GIS 類型的項目，需要為用戶提供一種直觀且符合習慣的方式來瀏覽和操作場景。MapControls 是一個類似于 Google Maps 風格的相機控制器，允許用戶通過鼠標和觸摸屏操作來平移、縮放和旋轉場景。
6.1 MapControls使用
- 平移：鼠標左鍵拖動
- 旋轉：鼠標右鍵拖動
- 縮放：鼠標中鍵滾動
MapControls本質上就是改變相機的參數(shù)，比如相機的位置屬性、相機目標觀察點。
// 引入相機控件`MapControls`
import { MapControls } from 'three/addons/controls/OrbitControls.js';
const controls = new MapControls(camera, renderer.domElement);
controls.addEventListener('change', function () {
// 鼠標右鍵旋轉時候，查看.position變化
// 鼠標左鍵拖動的時候，查看.position、.target的位置會變化
console.log('camera.position',camera.position);
console.log('controls.target',controls.target);
});
//相關限制方法：
controls.enablePan = false; //禁止平移
controls.enableZoom = false;//禁止縮放
controls.enableRotate = false; //禁止旋轉
//相機位置與觀察目標點最小值
controls.minDistance = 200;
//相機位置與觀察目標點最大值
controls.maxDistance = 500;
// 上下旋轉范圍
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI/2;
// 左右旋轉范圍
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;
//更新方法
function animate() {
requestAnimationFrame(animate);
// 更新控制器
controls.update();
// 渲染場景
renderer.render(scene, camera);
}7. 窗口變化的自適應渲染
在開發(fā) Three.js 項目時，我們需要考慮到不同的設備和屏幕尺寸。當用戶調整瀏覽器窗口大小時，我們希望場景能夠自適應地進行調整，以保持正確的比例和尺寸。
要實現(xiàn)自適應渲染，我們需要在瀏覽器窗口大小發(fā)生變化時更新相機和渲染器的設置。首先，我們需要為 window 對象添加一個 resize 事件監(jiān)聽器：
window.addEventListener('resize', onWindowResize);
接下來，我們定義 onWindowResize 函數(shù)。在這個函數(shù)中，我們需要完成以下任務：
- 更新相機的寬高比（
aspect）。 - 更新相機的投影矩陣。
- 更新渲染器的大小。
7.1 正投影相機OrthographicCamera自適應渲染
// onresize 事件會在窗口被調整大小時發(fā)生
function onWindowResize(){
// 重置渲染器輸出畫布canvas尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
// 重置相機投影的相關參數(shù)
k = window.innerWidth/window.innerHeight;//窗口寬高比
camera.left = -s*k;
camera.right = s*k;
camera.top = s;
camera.bottom = -s;
// 渲染器執(zhí)行render方法的時候會讀取相機對象的投影矩陣屬性projectionMatrix
// 但是不會每渲染一幀，就通過相機的屬性計算投影矩陣(節(jié)約計算資源)
// 如果相機的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機的投影矩陣
camera.updateProjectionMatrix ();
};7.2 透視投影相機PerspectiveCamera自適應渲染
// onresize 事件會在窗口被調整大小時發(fā)生
function onWindowResize(){
// 重置渲染器輸出畫布canvas尺寸
renderer.setSize(window.innerWidth,window.innerHeight);
// 全屏情況下：設置觀察范圍長寬比aspect為窗口寬高比
camera.aspect = window.innerWidth/window.innerHeight;
// 渲染器執(zhí)行render方法的時候會讀取相機對象的投影矩陣屬性projectionMatrix
// 但是不會每渲染一幀，就通過相機的屬性計算投影矩陣(節(jié)約計算資源)
// 如果相機的一些屬性發(fā)生了變化，需要執(zhí)行updateProjectionMatrix ()方法更新相機的投影矩陣
camera.updateProjectionMatrix ();
};以上就是Three.js相機Camera的詳細內容，更多關于Three.js相機Camera的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了微信小程序 用戶數(shù)據(jù)解密詳細介紹的相關資料,需要的朋友可以參考下2017-01-01
漂亮的仿flash菜單，來自藍色經典...2006-06-06
這篇文章主要為大家介紹了JavaScript手寫異步加法asyncAdd方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了response body加密如何破解的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序 圖片邊框解決方法的相關資料,需要的朋友可以參考下2017-01-01
TypeScript對象解構操作符在Spartacus實際項目開發(fā)中的應用解析
這篇文章主要為大家介紹了TypeScript對象解構操作符在Spartacus實際項目開發(fā)中的應用解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-07-07
這篇文章主要為大家介紹了threejs中使用drawbufferss示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解
這篇文章主要介紹了JavaScript使用JSON.stringify()方法帶參及不帶參示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要介紹了微信小程序 action-sheet詳解及實例代碼的相關資料,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了微信小程序引用公共js里的方法的實例詳解的相關資料,這里提供了實現(xiàn)的方法，希望能幫助到大家，需要的朋友可以參考下2017-08-08