https://github.com/ncchen99/about-me
🥰 念誠的個人網頁
https://github.com/ncchen99/about-me
love react-three vite
Last synced: about 1 month ago
JSON representation
🥰 念誠的個人網頁
- Host: GitHub
- URL: https://github.com/ncchen99/about-me
- Owner: ncchen99
- License: mit
- Created: 2025-03-14T20:34:10.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-03-14T22:16:24.000Z (2 months ago)
- Last Synced: 2025-03-14T22:28:44.141Z (2 months ago)
- Topics: love, react-three, vite
- Language: JavaScript
- Homepage: https://ncchen.pages.dev
- Size: 1000 Bytes
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🔥 念誠ㄉ個人網頁
這是一個使用React、Three.js和Tailwind CSS構建的3D場景展示網頁，主要展示一個苔蘚木頭模型，並具有豐富的互動效果和音效。
## 功能
- 使用Three.js渲染高質量的3D場景
- 使用React作為前端框架
- 使用Tailwind CSS進行樣式設計
- 支持模型紋理和光照
- 互動式場景控制（旋轉、縮放等）
- 螢火蟲粒子系統
- 背景音樂和互動音效
- 響應式設計，支持移動設備
- 視差滾動首頁
## 特色
- 首頁使用視差滾動效果，滑鼠移動時背景圖層會產生互動效果
- 3D 場景頁面展示苔蘚木頭模型，具有真實的材質和光照效果
- 互動式螢火蟲粒子系統，點擊時會產生特殊效果
- 使用中文陳雨露演字體（ChenYuluoyan）
- 字體子集化處理，減少載入資源大小
- 優化的移動設備體驗
- 漸進式音頻加載和播放
## 目錄結構
```
├── public/ # 靜態文件
│ ├── images/ # 背景圖片（天空、山脈、地面）
│ ├── audio/ # 音頻文件
│ └── font/ # 字體文件
│ └── subset/ # 子集化後的字體
├── assets/ # 3D模型和紋理
│ └── mossy-log/ # 苔蘚木頭模型資源
│ ├── source/ # 模型文件
│ └── textures/ # 紋理文件
├── src/ # 源代碼
│ ├── components/ # React組件
│ │ ├── MossyLogScene.js # 3D場景渲染組件
│ │ ├── AudioManager.js # 音頻管理組件
│ │ ├── ParallaxHome.js # 視差滾動首頁組件
│ │ └── Loader.js # 加載動畫組件
│ ├── styles/ # CSS樣式
│ ├── App.js # 主應用組件
│ └── index.js # 入口文件
├── tailwind.config.js # Tailwind配置
├── postcss.config.js # PostCSS配置
└── package.json # 依賴項配置
```
## 安裝
1. 確保已安裝Node.js (v14或更高版本)
2. 克隆本倉庫
3. 安裝依賴：
```bash
npm install
```
4. 生成字體子集（可選，但建議執行以減少字體檔案大小）：
```bash
npm run subset-font
```
## 運行
```bash
npm start
```
應用將在[http://localhost:3000](http://localhost:3000)啟動
## 控制
### 桌面版
- 左鍵拖動：旋轉場景
- 鼠標滾輪：縮放場景
- 右鍵拖動：平移場景
- 點擊木頭/花朵/苔蘚：觸發音效
- 點擊發光粒子：互動效果
### 移動版
- 單指拖動：旋轉場景
- 雙指縮放：縮放場景
- 點擊木頭/花朵/苔蘚：觸發音效
- 點擊發光粒子：互動效果
## 技術細節
- React 18
- Three.js
- React Three Fiber (Three.js的React渲染器)
- React Three Drei (Three.js的實用React組件)
- Tailwind CSS
- Web Audio API
### 視差滾動
首頁的視差效果是通過追蹤滑鼠移動位置，根據不同圖層的深度設定不同的移動速度來實現的。圖層從後到前為：
- 天空 (sky.png) - 最遠，移動最少
- 山脈 (mount.png) - 中間層，移動適中
- 地面 (ground.png) - 最近，移動最多
### 音頻系統
- 背景音樂在用戶首次互動後開始播放
- 漸進式音量控制，避免突然的聲音
- 支持靜音/取消靜音功能
- 互動音效（點擊木頭、花朵等）
### 螢火蟲粒子系統
- 動態生成的粒子效果
- 真實的物理運動模擬
- 點擊互動效果
- 優化的性能表現
### 字體子集化
為了優化網頁載入速度，我們使用 Fontmin 處理中文字體，僅保留網頁中使用到的字符。這個過程會：
1. 掃描所有 JavaScript 和 HTML 文件中的中文字符
2. 生成僅包含這些字符的字體子集
3. 轉換為 WOFF2 格式，進一步減少檔案大小
## 注意事項
- 字體子集化需要有 Node.js 環境
- 開發過程中添加新的中文文字後，需要重新運行字體子集化腳本
- 音頻播放需要用戶互動（瀏覽器政策）
- 建議使用現代瀏覽器以獲得最佳體驗