在 Three.js 中，相機(jī)的視角（即相機(jī)的朝向）可以通過(guò)多種方式進(jìn)行設(shè)置。以下是一些常用的方法：

1. 使用 lookAt 設(shè)置視角

camera.lookAt() 是 Three.js 中最常用的方法之一，用于設(shè)置相機(jī)看向特定的目標(biāo)點(diǎn)。

示例：

camera.position.set(0, 10, 20); // 設(shè)置相機(jī)的位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 設(shè)置相機(jī)看向世界坐標(biāo) (0, 0, 0)

• lookAt(target):
  • 參數(shù) target 是一個(gè) THREE.Vector3，表示目標(biāo)點(diǎn)的世界坐標(biāo)。
  • 相機(jī)會(huì)調(diào)整自己的方向，以使得它的視線對(duì)準(zhǔn)目標(biāo)點(diǎn)。

2. 直接設(shè)置相機(jī)的旋轉(zhuǎn)（rotation）

相機(jī)的旋轉(zhuǎn)可以通過(guò)設(shè)置 rotation 屬性的值來(lái)實(shí)現(xiàn)。rotation 是一個(gè) THREE.Euler 對(duì)象，包含三個(gè)軸的旋轉(zhuǎn)值：x, y, 和 z。

示例：

camera.position.set(0, 10, 20); // 設(shè)置相機(jī)的位置
camera.rotation.x = Math.PI / 4; // 繞 X 軸旋轉(zhuǎn) 45 度
camera.rotation.y = Math.PI / 6; // 繞 Y 軸旋轉(zhuǎn) 30 度
camera.rotation.z = 0;           // 繞 Z 軸不旋轉(zhuǎn)

• 注意：
  • rotation 是歐拉角（Euler Angles），單位是弧度（radians）。
  • 順序是 XYZ（先繞 X 軸旋轉(zhuǎn)，再繞 Y 軸旋轉(zhuǎn)，最后繞 Z 軸旋轉(zhuǎn)）。

3. 使用四元數(shù)（quaternion）設(shè)置方向

四元數(shù)提供了一種更穩(wěn)定的方式來(lái)設(shè)置相機(jī)的方向，特別適用于避免萬(wàn)向鎖問(wèn)題。

示例：

const quaternion = new THREE.Quaternion();
const axis = new THREE.Vector3(0, 1, 0); // 繞 Y 軸旋轉(zhuǎn)
const angle = Math.PI / 4; // 旋轉(zhuǎn)角度為 45 度

quaternion.setFromAxisAngle(axis, angle); // 生成四元數(shù)
camera.quaternion.copy(quaternion); // 應(yīng)用到相機(jī)

• setFromAxisAngle(axis, angle):
  • axis 是旋轉(zhuǎn)軸（THREE.Vector3）。
  • angle 是旋轉(zhuǎn)的角度（單位為弧度）。
• 使用四元數(shù)設(shè)置方向更適合動(dòng)態(tài)旋轉(zhuǎn)的場(chǎng)景。

4. 通過(guò)軌道控制（OrbitControls）設(shè)置視角

OrbitControls 是一種交互式工具，用于實(shí)時(shí)調(diào)整相機(jī)視角，通常由用戶通過(guò)鼠標(biāo)或觸摸手勢(shì)操作。

示例：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0); // 設(shè)置相機(jī)圍繞的目標(biāo)點(diǎn)
controls.update(); // 更新控制器

• controls.target：
  • 相機(jī)圍繞的目標(biāo)點(diǎn)，類似于 lookAt 的功能。
• 用戶可以通過(guò)拖動(dòng)鼠標(biāo)來(lái)旋轉(zhuǎn)相機(jī)視角。

5. 通過(guò)視線向量（getWorldDirection）設(shè)置方向

可以通過(guò)直接操作相機(jī)的方向向量來(lái)設(shè)置視角。

示例：

const direction = new THREE.Vector3(1, 0, 0); // 設(shè)置方向向量
camera.lookAt(camera.position.clone().add(direction)); // 相機(jī)沿指定方向看

• getWorldDirection：
  • 返回相機(jī)當(dāng)前的朝向向量。
  • 可以通過(guò)計(jì)算新的方向向量來(lái)動(dòng)態(tài)設(shè)置視角。

6. 圍繞目標(biāo)旋轉(zhuǎn)（通過(guò)矩陣變換）

通過(guò)矩陣變換，可以讓相機(jī)圍繞目標(biāo)點(diǎn)旋轉(zhuǎn)。

示例：

const radius = 10; // 半徑
const angle = Math.PI / 4; // 旋轉(zhuǎn)角度

camera.position.x = radius * Math.cos(angle); // 設(shè)置 X 位置
camera.position.z = radius * Math.sin(angle); // 設(shè)置 Z 位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 看向目標(biāo)點(diǎn)

• 使用三角函數(shù)（Math.cos 和 Math.sin）計(jì)算相機(jī)在圓周上的位置。

7. 通過(guò)動(dòng)畫(huà)動(dòng)態(tài)調(diào)整視角

如果需要平滑調(diào)整相機(jī)視角，可以通過(guò)動(dòng)畫(huà)庫(kù)（如 gsap 或自定義動(dòng)畫(huà)）實(shí)現(xiàn)。

示例：

const target = new THREE.Vector3(10, 10, 10); // 目標(biāo)點(diǎn)

// 動(dòng)畫(huà)平滑調(diào)整相機(jī)視角
gsap.to(camera.position, {
  x: target.x,
  y: target.y,
  z: target.z,
  duration: 2, // 動(dòng)畫(huà)持續(xù)時(shí)間
  onUpdate: () => {
    camera.lookAt(new THREE.Vector3(0, 0, 0)); // 保持看向目標(biāo)點(diǎn)
  }
});

• gsap.to：
  • 動(dòng)畫(huà)庫(kù)用于動(dòng)態(tài)修改相機(jī)位置。
  • 在 onUpdate 回調(diào)中不斷更新相機(jī)視角。

8. 通過(guò)極坐標(biāo)計(jì)算視角

可以將視角設(shè)置為基于極坐標(biāo)的角度（例如俯仰和方位角）：

示例：

const radius = 10; // 距離目標(biāo)點(diǎn)的半徑
const theta = Math.PI / 4; // 方位角（繞 Y 軸旋轉(zhuǎn)）
const phi = Math.PI / 6;   // 俯仰角（繞 X 軸旋轉(zhuǎn)）

// 極坐標(biāo)轉(zhuǎn)直角坐標(biāo)
camera.position.x = radius * Math.sin(phi) * Math.cos(theta);
camera.position.y = radius * Math.cos(phi);
camera.position.z = radius * Math.sin(phi) * Math.sin(theta);

// 保持看向目標(biāo)點(diǎn)
camera.lookAt(new THREE.Vector3(0, 0, 0));

總結(jié)

到此這篇關(guān)于Three.js中調(diào)整相機(jī)視角常用方法的文章就介紹到這了,更多相關(guān)Three.js調(diào)整相機(jī)視角內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論