我的第一個 Three.js 專案

github: https://github.com/iris1114/threejs

demo: https://first-threejs-project.netlify.app/

1. Scene

Scene 是個容器，用於存放所有 objects (物件)、models (模型)、particles (粒子)、lights (光源) 等。

const scene = new THREE.Scene()

2. Objects

Mesh (網格): 結合 geometry (幾何體) 和 material (材質) 形成可見的物件。

範例：創建一個綠色立方體

Geometry : 使用 BoxGeometry 指定大小（參數為寬度、高度和深度）。
Material : 使用 MeshBasicMaterial 並設置 color 屬性。
組合並添加到 Scene 中。

const geometry = new THREE.BoxGeometry(1, 1, 1) // 創建幾何體
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }) // 綠色及線框
const mesh = new THREE.Mesh(geometry, material) // 創建網格
scene.add(mesh) // 添加到場景

3. Camera

Camera 代表觀察者的視角。使用 PerspectiveCamera (透視相機) 來模擬透視效果（近大遠小）。

關鍵參數:

fov: Field of View (視場角度)，以度數表示（例如 75）。
aspect: Aspect Ratio (寬高比)，通常是 canvas 的寬度/高度。

調整位置：為了查看物件，將 Camera 沿著 z 軸向後移動。

const sizes = { width: 800, height: 600 } // 畫布尺寸
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3 // 將相機向後移動
scene.add(camera) // 添加相機到場景

4. Renderer

Renderer 的作用是將 Scene 從 Camera 的視角渲染到 canvas 上。

設置:

在 HTML 中創建一個 <canvas> 元素，例如：<canvas class="webgl"></canvas>。
使用 WebGLRenderer 將該 canvas 與 Renderer 連接，並設置 canvas 尺寸。

const canvas = document.querySelector('canvas.webgl') // 選取畫布
const renderer = new THREE.WebGLRenderer({ canvas: canvas }) // 創建渲染器
renderer.setSize(sizes.width, sizes.height) // 設置畫布尺寸

5. First Render

使用 renderer.render 方法將 Scene 和 Camera 傳入：

renderer.render(scene, camera)

注意：如果 Camera 和物件的位置重疊或設置不當，可能無法看到物件，需要調整它們的位置。

Summary Code

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const scene = new THREE.Scene()

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true })
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Sizes
const sizes = {
  width: 800,
  height: 600,
}

// Camera
const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height)
camera.position.z = 3
scene.add(camera)

// Renderer
const renderer = new THREE.WebGLRenderer({ canvas: canvas })
renderer.setSize(sizes.width, sizes.height)

// Render
renderer.render(scene, camera)

Others

Object 和 Camera 的默認位置是 Scene 的中心 (0, 0, 0)。
可以使用 position、rotation 和 scale 屬性來操作 Object 和 Camera，可參考這篇筆記。
Canvas 大小是可調的，可以用 Renderer 的 setSize 來調整。