系列文章目錄

系列文章目錄

Three.js 快速入門教程【一】開啟你的 3D Web 開發之旅
Three.js 快速入門教程【二】透視投影相機
Three.js 快速入門教程【三】渲染器
Three.js 快速入門教程【四】三維坐標系
Three.js 快速入門教程【五】動畫渲染循環
Three.js 快速入門教程【六】相機控件 OrbitControls
Three.js 快速入門教程【七】常見幾何體類型

---

---

一、前言

????在 Three.js 創建的 3D 虛擬世界中，相機是我們觀察場景的窗口。而透視投影相機（PerspectiveCamera）是 Three.js 里常用的相機類型之一，它模擬了人眼觀察物體的方式，即近大遠小，能為場景帶來逼真的深度感。本篇文章將介紹透視投影相機在 Three.js 中的使用。

---

二、創建透視投影相機

// 創建一個透視相機
const camera = new THREE.PerspectiveCamera(75, // 視場角（FOV）window.innerWidth / window.innerHeight, // 寬高比0.1, // 近裁剪面2000 // 遠裁剪面
);

PerspectiveCamera( fov, aspect, near, far )參數介紹：

參數	說明	默認值
fov	視野角度（Field of View），指垂直方向上的視角，單位是度。通常設置為 45 - 75 度，類似人眼的視角范圍，能讓場景看起來自然。數值越大，視角越廣，場景中的物體看起來越小；數值越小，視角越窄，物體看起來越大	50
aspect	寬高比，即渲染區域的寬度與高度之比。一般設置為Canvas畫布寬高比width / height，確保場景在不同尺寸屏幕上正確顯示	1
near	近裁剪面，相機能看到的最近距離。小于此距離的物體不會被渲染。設置過小可能導致近處物體出現閃爍或錯誤，需根據場景大小合理調整	0.1
far	遠裁剪面，相機能看到的最遠距離。大于此距離的物體不會被渲染。設置過大可能影響性能，因為 GPU 需要處理更多遠處的物體。	2000

ps:表格中提到的Canvas畫布指的是3d場景在網頁上渲染的dom節點，它是個canvas，可通過渲染器的domElement屬性獲取。

//創建渲染器
const renderer = new THREE.WebGLRenderer();
//獲取dom
const canvas=renderer.domElement

---

三、位置設置

改變相機在3D場景中位置

1、通過camera.position.set(x,y,z)，其中x,y,z分別代表3維坐標系中x軸、y軸、z軸坐標向量

camera.position.set(5, 10, 30);

2、通過camera.position.屬性設置，camera.position是一個THREE.Vector3對象（三維向量），有x、y、z三個屬性

camera.position.x = 5;
camera.position.y = 10;
camera.position.z = 30;

ps:相機默認位置在原點（0,0,0）

---

四、方向控制

設置相機方向，使得它的正前方指向某個方向。

通過camera.lookAt(x,y,z)，讓相機看向某個點

camera.lookAt(0,10,30);

或傳入一個三維向量對象

const target = new THREE.Vector3( 0, 10, 30 );
camera.lookAt( target );

看向場景中一個物體：

const mesh= new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1),new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(mesh);
camera.lookAt(mesh.position);

始終保持看向該物體：

function animate() {requestAnimationFrame(animate);camera.lookAt(mesh.position);renderer.render(scene, camera);
}
animate();

ps:相機方向默認看向z軸負方向

知識點提前了解：z軸方向跟css z-index方向是一致的，人眼睛跟電腦屏幕垂直方向即為z軸，
向屏幕內為負，向屏幕外為正，屏幕寬方向為x軸，高方向為y軸

---

五、旋轉相機

1、通過camera.rotation.set(x,y,z)；

入參x,y,z以弧度為單位

// 設置相機繞z軸旋轉45度（轉換為弧度），x軸和y軸不旋轉
camera.rotation.set(0,0,Math.PI / 4,);

2、通過rotation屬性旋轉相機

rotation屬性包含三個值，分別是繞 X、Y、Z 軸的旋轉角度（以弧度為單位）

//繞著x軸旋轉45度
camera.rotation.x=Math.PI/4;
//繞著y軸旋轉90度
camera.rotation.y=Math.PI/2;
//繞著z軸旋轉60度
camera.rotation.z=Math.PI/3;

旋轉順序：默認XYZ(可通過camera.rotation.order修改)

camera.rotation.order='YZX';

---

六、牛刀小試

下面實現一個小案例：通過鼠標滾輪實現相機縮放功能

代碼示例：

import * as THREE from "three";
//創建場景
const scene = new THREE.Scene();
//設置黑色背景色
scene.background = new THREE.Color(0x000000);//創建一個球體
const geometry = new THREE.SphereGeometry(5);
//創建一個基礎材質
const material = new THREE.MeshBasicMaterial({color: "#ff00ff",
});
//創建一個網格對象
const mesh = new THREE.Mesh(geometry, material);
//設置網格對象位置
mesh.position.set(0, 0, 0);
//添加到場景中
scene.add(mesh);//創建相機
const camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000
);
//設置相機位置
camera.position.set(0, 10, 30);
//相機默認看向網格對象
camera.lookAt(mesh.position);//創建渲染器
const renderer = new THREE.WebGLRenderer();
//設置渲染器尺寸為頁面寬高
renderer.setSize(document.documentElement.clientWidth,document.documentElement.clientHeight
);
//將渲染器的 DOM 元素添加到頁面中
document.body.appendChild(renderer.domElement);// 循環動畫
function animate() {// 定時刷新requestAnimationFrame(animate);renderer.render(scene, camera);
}
// 執行動畫
animate();//監聽滾輪事件
window.addEventListener("wheel", (event) => {const speed = 1;if (event.deltaY > 0) {//縮小camera.position.z += speed;} else {//放大camera.position.z -= speed;}
});

運行效果：

說明：監聽wheel事件，根據滾輪滾動方向調整相機的position.z值，position.z值越大相機離我們眼睛越近，離物體越遠呈現視覺效果就是物體在縮小，反之在放大。

總結

??????透視投影相機是 Three.js 創建逼真 3D 場景的重要工具。通過掌握其創建、位置與方向控制以及與場景的交互，我們能為用戶帶來更豐富、沉浸式的 3D 體驗。在實際應用中，需根據場景需求和用戶體驗，不斷調整相機參數和交互邏輯，創造出令人滿意的 3D 作品。

更多three.js入門知識點請關注該系列教程后續的更新。