Vue Three.js 中的相機和燈光：掌控你的 3D 世界

相機

相機定義了我們觀看 3D 場景的方式。在 Vue Three.js 中，相機透過 PerspectiveCamera 類別表示。你可以透過以下程式碼建立一個新的相機：

import { PerspectiveCamera } from "three";

const camera = new PerspectiveCamera(75, aspectRatio, 1, 1000);

• 75：相機視角，以度為單位。
• aspectRatio：相機寬高比。
• 1：相機近平面距離。
• 1000：相機遠平面距離。

你可以設定相機的位置和角度，以改變場景的視角：

camera.position.set(5, 10, 15);  // 設定相機位置
camera.lookAt(0, 0, 0);          // 設定相機觀看方向

燈光

燈光幫助照亮場景，營造逼真度和氛圍。Vue Three.js 提供了多種燈光類型，包括：

• AmbientLight： 均勻照亮場景。
• DirectionalLight： 發射定向光束。
• PointLight： 發射點光源。
• SpotLight： 發射錐形光束。

以下是建立和配置不同類型燈光的程式碼範例：

// 環境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);

// 方向光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);

// 點光源
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);

// 聚光燈
const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(15, 15, 15);
spotLight.angle = Math.PI / 4;

進階技巧

• 相機動畫： 使用 TweenMax 或 GSAP 等動畫庫為相機移動和旋轉建立流暢的動畫。
• 燈光效果： 調整燈光的顏色、強度和衰減值，營造不同的光照效果。
• 陰影： 啟用陰影，以增加場景的深度和逼真度。

結論

透過掌握 Vue Three.js 中的相機和燈光，你可以徹底掌控你的 3D 世界。調整相機位置和角度創造不同的視角，並配置燈光以設定氛圍和照亮場景。這些技巧將提升你的 3D 應用程式的視覺效果和沉浸感。