3D Web / Experiment
R3F Practice
把自製 3D 模型帶進瀏覽器，練習用鏡頭、材質與互動建立空間敘事。
- 我的角色
- 3D 模型製作、場景設計、互動開發
- 方法
- 模型輸出、光影配置、鏡頭與輸入測試
- 成果
- 可於瀏覽器探索的 3D Web 實驗
01 / EXPERIMENT
模型進入瀏覽器後，
才開始成為一段體驗。
這是一組以 React Three Fiber 製作的 3D Web 實驗。我將製作完成的模型放進網頁，測試場景配置、光線、鏡頭與使用者輸入如何共同影響物件被理解與探索的方式。
練習的目標不是單純展示模型，而是建立一套能重複調整、快速驗證的 Web 3D 工作流程。
02 / PIPELINE
從模型到互動，
建立完整的 Web 3D 流程。
- 01
Model
整理模型比例、材質與輸出格式。
- 02
Scene
配置鏡頭、燈光與空間層級。
- 03
Interact
將滑鼠與觸控轉成探索行為。
03 / LEARNING LOG
用小型實驗，建立空間互動的判斷力。
- 01
場景組成
理解鏡頭、光線、材質與物件層級如何共同塑造視覺焦點。
- 02
互動映射
比較旋轉、縮放與視角移動如何影響探索感與操作負擔。
- 03
效能取捨
在模型細節、渲染成本與載入速度之間建立可驗證的選擇。
- TypeScript
- React Three Fiber
- Three.js
- 3D Modeling