3D Earth Canvas 使用說明

1. 功能概述

這個元件使用 React + React Three Fiber (R3F) 和 Three.js 渲染一個可互動的 3D 地球模型，支援以下功能：

• 地球自轉動畫
• 使用貼圖顯示真實地球表面
• 可用滑鼠旋轉觀看球體（禁用縮放和平移）

Earth3D 元件：

• <Canvas>

  R3F 根容器，相當於 Three.js 的 Scene + Camera + Renderer

• camera.position = [x, y, z]

  三維座標陣列表示相機在 3D 空間的位置。右手坐標系中：X → 左右, Y → 上下, Z → 前後。例如 [0,0,5] 表示相機位於畫面前方 5 單位，對準原點 (0,0,0)

• ambientLight

  環境光，提供整體照明

• directionalLight

  方向光，模擬太陽光效果

• <OrbitControls>

  滑鼠旋轉控制器（旋轉啟用，縮放和平移禁用）

• <Earth>

  地球物件元件，載入貼圖並旋轉

• sphereGeometry args = [半徑, 水平分段, 垂直分段]

  用陣列傳入球體幾何體參數，例如 [1, 1024, 1024] 表示半徑 1、水平/垂直分段各 1024

Earth 元件：

• useLoader(TextureLoader)

  載入地球貼圖

• useRef

  取得 mesh 實例，方便修改旋轉

• useFrame

  每幀更新 mesh 的 Y 軸旋轉，自轉動畫

• meshStandardMaterial map={colorMap}

  套用貼圖材質