Three.js入門-相機控制器

calmound發表於2024-12-01
JS

概念介紹

在開始前，我們先看一下效果，我在場景中建立了一個立方體，當我們點選滑鼠左鍵並拖動時，可以旋轉相機視角，滾動滑鼠滾輪可以縮放相機視角。

file

相信看了動圖效果，大家對相機控制元件有了一個直觀的認識。它是 Three.js 中用於控制相機的工具，可以幫助使用者在 3D 場景中自由旋轉、縮放和*移相機，提供更加友好的互動體驗。

在 Three.js 中，相機（Camera）是決定如何渲染場景的關鍵元素。它是使用者從哪個角度看到 3D 場景的“視窗”。相機控制器（Camera Controls）則是允許開發者在場景中動態調整相機視角、位置和縮放的工具。對於大多數 3D 應用程式，尤其是需要互動的應用程式，控制相機的行為是非常重要的一部分。

常見的相機型別：

透視相機（PerspectiveCamera）

這是最常見的相機型別，它模仿了人眼的視覺效果。透過設定視野角度、*剪裁*面和遠剪裁*面來決定觀察的範圍。

正交相機（OrthographicCamera）

不同於透視相機，正交相機的檢視沒有透視失真，適合需要*行視角的場景，比如 2D 遊戲、CAD 或者是某些型別的資料視覺化。

常見的相機控制元件

Three.js 提供了一些非常強大的相機控制器，用於增強使用者與 3D 場景的互動。這些控制元件一般會利用滑鼠、觸控板等輸入裝置，允許使用者旋轉、縮放、*移相機。

2.1 OrbitControls
OrbitControls 是 Three.js 中最常用的相機控制元件之一。它允許使用者繞著一個目標點進行旋轉、縮放和拖動，適用於大多數需要相機互動的場景。

用法

  1. 先在場景中建立一個立方體，作為 OrbitControls 的目標點。
import * as THREE from "three";

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

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.set(0, 0, 5);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function render() {
  renderer.render(scene, camera);
}

render();

file

  1. 接著，我們引入一個座標系輔助，用於等會操作時更好地觀察變化
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

file

  1. 最後，引入相機控制器。相機控制器不能直接透過 Three.OrbitControls()的方式引入，如果你是透過 npm 包管理器安裝的 three.js，那麼你可以在 node_modules/three/examples/jsm/controls 中找到 OrbitControls.js 檔案，然後透過 import 的方式引入。

file
所以你可以透過以下方式引入 OrbitControls：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

最後，完整的引入程式碼如下：

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// 建立一個控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 更新控制元件
controls.update();
// 新增事件監聽器，在控制元件變化時重新渲染
controls.addEventListener("change", render);

可以看到，引入一個控制器非常簡單，只需要傳入相機和渲染器的 dom 元素即可。然後透過 update() 方法更新控制元件，新增事件監聽器，當控制元件變化時重新渲染。

完整的程式碼如下：

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

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

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 0, 5);
controls.update();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

function render() {
  renderer.render(scene, camera);
}

controls.addEventListener("change", render); // add this line to re-render on control changes

render(); // initial render

Three.js學習：https://www.threejs3d.com/

相關文章