在本節中，我們將完成整個 3D 主業項目中最核心的組件 —— Hero.jsx。
這個組件作為首頁的主視覺部分，整合了 3D 模型、動畫相機、交互按鈕與自適應布局，構建出一個立體、酷炫、可交互的主場景。

前置準備：

• ?安裝依賴：npm install three @react-three/fiber @react-three@drei react-responsive leva @gsap/react gsap

包名	作用簡述
three	Three.js 本體，WebGL 3D 渲染引擎
@react-three/fiber	React 版本的 Three.js 渲染器
@react-three/drei	提供 Three.js 常用封裝組件和輔助工具
react-responsive	響應式 Hook（監聽設備寬度）
leva	一個調試控制面板工具，支持實時調整 3D 屬性
gsap	一個高性能、功能豐富的 JavaScript 動畫庫
@gsap/react	GSAP 團隊推出的 React 專用集成庫

---

🔍 Hero 組件的作用

Hero.jsx 是網站打開后第一個看到的 3D 場景區域。它承擔著兩個核心功能：

1. 向訪客展示個人身份與品牌理念（文本 + 視覺）
2. 構建完整的 Three.js 場景：包括模型加載、光源、相機、動畫控制等

---

🧩 涉及的關鍵技術點

• react-three-fiber：Canvas 渲染、相機控制、模型嵌入
• @react-three/drei：相機組件、異步加載
• react-responsive：根據屏幕尺寸自適應模型大小與位置
• 3D 子組件組合使用：HackerRoom、Target、ReactLogo、Cube、Rings
• 相機動畫控制：HeroCamera
• 按鈕組件與錨點跳轉：Button

---

📦 項目結構拆解

在 Hero.jsx 中，組價的層級對應：

Hero.jsx 
├── 文本介紹
├── Three.js 場景 
│ ├── Canvas 
│ │ ├── HeroCamera（自定義動畫相機） 
│ │ ├── HackerRoom（主模型） 
│ │ ├── Target / Cube / Rings / ReactLogo（小精靈） 
│ │ ├── ambientLight / directionalLight (環境光 定向光源)
│ │ └── CanvasLoader（加載動畫） 
└── CTA 按鈕（Let's work together）

---

📐 響應式尺寸控制

const isSmall = useMediaQuery({ maxWidth: 440 });
const isMobile = useMediaQuery({ maxWidth: 768 });
const isTablet = useMediaQuery({ maxWidth: 1024, minWidth: 768 });const sizes = calculateSizes(isSmall, isMobile, isTablet);

這里使用 react-responsive 監聽用戶設備寬度，并通過 calculateSizes 函數返回對應模型的 scale / position / offset 等數據，確保在手機 / 平板 / PC 上展示效果始終協調。

🎨 Canvas 渲染部分

<Canvas className='w-full h-full'><Suspense fallback={<CanvasLoader />}><PerspectiveCamera makeDefault position={[0, 0, 20]} /><HeroCamera isMobile={isMobile}><HackerRoomscale={sizes.deskScale}position={sizes.deskPosition} rotation={[0, -Math.PI, 0]}/></HeroCamera><group><Target position={sizes.targetPosition} ></Target><ReactLogo position={sizes.reactLogoPosition}></ReactLogo><Cube position={sizes.cubePosition}></Cube><Rings position={sizes.ringPosition}></Rings></group><ambientLight intensity={1} /><directionalLight intensity={0.5} position={[10, 10, 10]} /></Suspense>
</Canvas>

這里是整片場景的構建核心：

• PerspectiveCamera 設置視角

• Suspense 管理加載狀態

• HeroCamera 封裝了相機動畫邏輯（如旋轉、縮放）

• 多個 3D 子組件以 group 形式集中管理

• 光源使用了環境光 + 平行光混合

🧮 互動按鈕區域

<a href='#about' className='w-fit'><Buttonname="Let's work together"isBeamcontainerClass='sm:w-fit w-full sm:min-w-96'/>
</a>

底部按鈕使用自定義 Button 組件，點擊后可跳轉至頁面下方 #about 區域，作為頁面導航的核心 CTA（Call To Action）。

? 技術亮點總結

技術點	描述
🎛? useMediaQuery + calculateSizes	構建響應式模型配置
📦 Suspense + CanvasLoader	優雅管理異步加載
🧠 模塊化組件劃分	每個 3D 對象獨立封裝，易于維護
🎥 HeroCamera	控制相機視角變化，提升動態感
🧭 PerspectiveCamera + 光照系統	構建真實感場景
💬 UI 與 Canvas 疊加展示	實現文字/按鈕與 3D 并存效果

? 下一節預告：組件逐個拆解與優化

我們將在下一篇中開始我們的Work組件部分，包括：

---

如果你喜歡這篇文章，歡迎點贊、收藏、留言 💬
我們下一節見！👋