延續前一天的成果，我們已經畫了一個簡單的場景、新增了動畫，但有沒有覺得少了些什麼？

假設今天我們在看電影或玩遊戲，鏡位都只有一個，豈不是很無聊～所以我們今天就要針對鏡頭的互動性來增加一點風味！

OrbitControls

OrbitControls 是 Three.js 中常用的工具，允許 user 通過滑鼠或觸控來控制相機的旋轉、縮放和移動，從而實現對 3D 場景的控制。OrbitControls ****提供了類似軌道的相機控制方式，所以適合用於場景檢視或 3D 模型瀏覽。

為了節省引入 library 的資源， OrbitControls 沒有寫在 THREE 本庫 (?) 中，而是 examples，所以要在前面先引入 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

const controls = new OrbitControls(camera, canvas)

只要一句簡單的 script 就可以使用滑鼠拖拽來移動相機、且透過滾動滑鼠滾輪來進行縮放， Three.js 就是這麼神奇、直觀，先學了 WebGL 的我、再學了 OpenGL，最後才學 Three.js 真的是相見恨晚。

default 情況下，相機會看向場景的中心。我們可以通過 target 屬性來改變這一點。這個屬性是一個 Vector3 ，這意味著我們可以改變其 x、y 和 z 屬性。

如果我們希望 OrbitControls 默認看向立方體的上方，我們只需增加 y 屬性即可：

接下來提供一些其他的屬性，比如說最有效果的 damping ，這個屬性會通過加入一些加速度和摩擦力的公式來使動畫更加平滑，我自己的解釋是移動的慣性導致些許的晃動。中文翻譯，我查了一下叫做阻尼。

要啟用 dampling，可以將 controls 的 enableDamping 屬性設為 true。要注意的是為了讓 damping 能夠正常運作，還需要在每一幀更新 control，沿用之前的例子來說， animate 中的callback 函數中調用 controls.update() 來實現，相機控制就會變得更平滑。

• controls.dampingFactor: damping 的強度。
• controls.autoRotate: 自動旋轉相機，default 為 false。
• controls.autoRotateSpeed: 自動旋轉的速度。
• controls.minDistance 和 controls.maxDistance: 設置相機的最小和最大距離，限制相機縮放範圍。
• controls.maxPolarAngle: 設置垂直旋轉的最大角度，防止相機翻轉。

—

今天本來想要介紹更多其他的 controls，像是適合第一人稱射擊遊戲 (FPS) 的 FirstPersonControls、適合用於 VR 裝置的 DeviceOrientationControls、拿來協助定位的 TransformControls 等。但因為我今天要去搭飛機回台灣 XD 所以實在太忙了沒有時間一個個玩給大家看，只好先來寫一些我熟悉的內容。

—

相機

在 3D rendering 中，camera 模擬了人眼在場景中的視角和位置，負責捕捉和呈現 3D 場景到 2D 的圖像裡。而相機的主要構成由前 (front)、上 (up)、右 (right) 三個方向所定義。

1. 前（front 或 look direction）：
   • 這是相機的觀看方向，也就是相機面向的方向。
   • 在 Three.js 中，相機的 default 前方向是 Z 軸，這意味著相機會看向 -Z 軸的方向。其他語言中，有時候會以 +Z 為前方，有點討厭，要特別記一下。
   • camera.lookAt(target)
2. 上（up）：
   • 相機的上決定了相機的垂直方向。
   • 在 Three.js 中，default 的上是 +Y 軸。
3. 右（right）：
   • 右方向是相機的橫向方向，透過右手定律，我們可以由前與上去計算出來。
   • 大拇指指向 +X 軸，食指指向 +Y 軸，中指指向 +Z。

栗子 🌰

在實際應用中，可以透過設置相機的位置、觀看方向，並調整上方向來實現不同的效果。例如，如果我們希望相機在旋轉時保持水平，可以保持 camera.up 為 default 的 (0, 1, 0)。下面則是一個轉動鏡頭的簡單栗子～

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(0, 1, 5);
camera.up.set(0, 0, 1);  // 現在相機的上方向指向 Z 軸

camera.lookAt(0, 0, 0);
renderer.render(scene, camera);

好的！接下來回台灣也會認真寫文章的！大家明天見～