xr843/insect-world
Interactive 3D insect field guide: 63 species across 14 orders, every body procedurally generated in the browser with TypeScript + Three.js — no model or texture files in the repo. Eight species step through a full life cycle; the hoverers beat their wings.
解决的问题
Insect World 是一个涵盖 14 个目共 63 种昆虫的交互式 3D 百科全书。它通过视觉化、交互式体验,而非静态图像或预设 3D 模型,提供了一种学习昆虫解剖学、生命周期和生态角色的方法。
工作原理
与传统的 3D 展览不同,该项目使用 参数化几何,在浏览器中通过 TypeScript 实时生成。没有外部模型文件(GLB/OBJ);相反,代码定义了每种昆虫的结构参数(头部、胸部、腹部、腿、翅膀),实时构建几何体。
关键技术特性包括:
- 程序化纹理:使用 CanvasTexture 生成微米级表面细节,如凹坑、沟槽和复眼图案。
- 动态动画:实现生物启发的运动,例如蜻蜓的反相翼拍动和蝴蝶的连续“羽化”动画。
- 生命周期建模:针对部分物种,项目生成卵、幼虫、蛹和成虫的模型,展示完全变态与不完全变态的区别。
- 交互式工具:包含矢状面裁剪工具以查看内部结构、分层工具以调节外骨骼透明度,以及引导式导览,可自动将相机移动至特定解剖位置。
适用人群
专为希望以视觉化方式探索昆虫形态学和生物学的求知欲强的读者和学生设计,也适合对程序化 3D 生成和交互式教育工具感兴趣的开发者。
亮点
- 零资产依赖:所有 63 种昆虫均从代码渲染,项目高度可扩展且轻量。
- 生命周期可视化:8 个物种共生成 22 个阶段模型,包括详细的蛹和幼虫模型。
- 基于生物学的运动:翼拍频率为屏幕显示压缩,但保持物种间的相对顺序。
- 全面测试:超过 4,000 次测试,确保几何有效性、对称性以及中英文版本间的数据一致性。
- 双主题设计:提供“标本桌”亮色模式和“博物馆之夜”暗色模式,配有特殊光照以突出虹彩翅膀和生物发光效果。
相关
- 项目
- 项目
- 项目
- 项目
- 项目