在线： https://insect-world.pages.dev
源码： https://github.com/xr843/insect-world （ MIT ）
可交互的 3D 昆虫图鉴，60 个物种覆盖 14 个目。旋转、缩放、点模型上的彩色标注点看身体构造，有分步讲解和真能作答的小测。中英双语，双主题。
有意思的地方只有一个：每一只虫的几何体都是 TypeScript 在浏览器里现算出来的，仓库里没有一个 .glb/.gltf ，也没有一张贴图。
同类的 3D 解剖站点每个模型是几 MB 的 GLB 资产，靠采购或扫描得来。昆虫没有这种现成资产可买，所以把形态参数化了 —— 体分头/胸/腹三段，胸部生三对足两对翅，附肢是分节的锥管，翅面由放射状翅脉支撑。写成参数以后，加一个物种只要写一份尺寸与配色的描述，而不是再买一个模型。
- 单个物种 1.4 万~3.6 万三角面，浏览器里构建耗时 30~90ms
- 首屏 JS gzip 约 424KB ，物种代码按需分包，点到谁才下载谁
- 表面微观（刻点/沟纹/绒面/蜂窝复眼）由程序贴图在运行时生成
- 讲解每翻一步，3D 镜头自己移到讲到的那个部位上
代价是写实度不如三维扫描，换来的是零资产依赖、任意可扩展。
https://raw.githubusercontent.com/xr843/insect-world/master/docs/screenshots/05-gallery.jpg
需要说明：图鉴的讲解文案由 AI 撰写，没经过昆虫学文献或专业人士逐条核校，别当引用资料用；英文版也是 AI 翻译的。学名两版一致。发现错处欢迎开 issue 。
源码： https://github.com/xr843/insect-world （ MIT ）
可交互的 3D 昆虫图鉴，60 个物种覆盖 14 个目。旋转、缩放、点模型上的彩色标注点看身体构造，有分步讲解和真能作答的小测。中英双语，双主题。
有意思的地方只有一个：每一只虫的几何体都是 TypeScript 在浏览器里现算出来的，仓库里没有一个 .glb/.gltf ，也没有一张贴图。
同类的 3D 解剖站点每个模型是几 MB 的 GLB 资产，靠采购或扫描得来。昆虫没有这种现成资产可买，所以把形态参数化了 —— 体分头/胸/腹三段，胸部生三对足两对翅，附肢是分节的锥管，翅面由放射状翅脉支撑。写成参数以后，加一个物种只要写一份尺寸与配色的描述，而不是再买一个模型。
- 单个物种 1.4 万~3.6 万三角面，浏览器里构建耗时 30~90ms
- 首屏 JS gzip 约 424KB ，物种代码按需分包，点到谁才下载谁
- 表面微观（刻点/沟纹/绒面/蜂窝复眼）由程序贴图在运行时生成
- 讲解每翻一步，3D 镜头自己移到讲到的那个部位上
代价是写实度不如三维扫描，换来的是零资产依赖、任意可扩展。
https://raw.githubusercontent.com/xr843/insect-world/master/docs/screenshots/05-gallery.jpg
需要说明：图鉴的讲解文案由 AI 撰写，没经过昆虫学文献或专业人士逐条核校，别当引用资料用；英文版也是 AI 翻译的。学名两版一致。发现错处欢迎开 issue 。
1
Select Language