xr843/insect-world

解決的問題

Insect World 是一個涵蓋 14 個目共 63 種昆蟲的互動式 3D 百科全書。它透過視覺化、互動式體驗，而非靜態圖像或預設 3D 模型，提供學習昆蟲解剖學、生命週期和生態角色的方法。

工作原理

與傳統的 3D 展覽不同，本專案使用 參數化幾何，在瀏覽器中透過 TypeScript 即時生成。沒有外部模型檔案（GLB/OBJ）；相反，程式碼定義每種昆蟲的結構參數（頭部、胸部、腹部、腳、翅膀），即時建構幾何體。

關鍵技術特性包括：

• 程序化紋理：使用 CanvasTexture 生成微米級表面細節，如凹坑、溝槽和複眼圖案。
• 動態動畫：實現生物啟發的運動，例如蜻蜓的反相翼拍動和蝴蝶的連續「羽化」動畫。
• 生命週期建模：針對部分物種，專案生成卵、幼蟲、蛹和成蟲的模型，展示完全變態與不完全變態的差異。
• 互動式工具：包含矢狀面裁剪工具以檢視內部結構、分層工具以調節外骨骼透明度，以及引導式導覽，可自動將相機移動至特定解剖位置。

適用對象

專為希望以視覺化方式探索昆蟲形態學和生物學的求知欲強的讀者和學生設計，也適合對程序化 3D 生成和互動式教育工具感興趣的開發者。

亮點

• 零資產依賴：所有 63 種昆蟲均從程式碼渲染，專案高度可擴展且輕量。
• 生命週期可視化：8 個物種共生成 22 個階段模型，包括詳細的蛹和幼蟲模型。
• 基於生物學的運動：翼拍頻率為螢幕顯示壓縮，但保持物種間的相對順序。
• 全面測試：超過 4,000 次測試，確保幾何有效性、對稱性以及中英文版本間的資料一致性。
• 雙主題設計：提供「標本桌」亮色模式和「博物館之夜」暗色模式，配有特殊光照以突顯虹彩翅膀和生物發光效果。