[开源推荐] 用代码实时生成 60 种昆虫的 3D 交互图鉴

项目地址

https://github.com/xr843/insect-world

类别

JS

项目标题

用代码实时生成 60 种昆虫的 3D 交互图鉴

项目描述

可交互的 3D 昆虫图鉴，60 个物种覆盖 14 个目。旋转、缩放、点击模型上的彩色标注点，就能看昆虫的身体构造、生活史与生态角色，配有分步讲解与真能作答的小测。既可以拿来认虫，也可以参考「不用美术资产、纯靠代码生成 3D 模型」这条路怎么走。在线体验：https://insect-world.pages.dev

亮点

每一只虫的几何体都是 TypeScript 在浏览器里实时算出来的，仓库里没有一个 .glb／.gltf，也没有一张贴图。

同类的 3D 解剖站点，每个模型通常是几 MB 的 GLB 资产，靠采购或扫描得来。昆虫没有这样的现成资产可买，所以这个项目换了条路：把昆虫形态参数化 —— 体分头／胸／腹三段，胸部生三对足、两对翅，附肢是分节的锥管，翅面由放射状翅脉支撑。这些写成参数以后，加一个物种只需要写一份尺寸与配色的描述，而不是再买一个模型。

• 单个物种 1.4 万3.6 万三角面，浏览器里构建耗时 3090 ms
• 首屏 JS gzip 约 424 KB，物种代码按需分包，点到谁才下载谁
• 表面微观（刻点／沟纹／绒面／蜂窝复眼）由程序贴图在运行时生成，不依赖图片文件
• 交互上不留只有样子的按钮：分步讲解每翻一步，3D 镜头自己移到讲到的那个部位；剖切用裁剪平面真的切开模型；小测判对错、给解释、统计得分
• 双主题、中英双语，4030 个测试

对初学者的参考价值主要在建模层：src/three/builders/kit.ts 是一套放样工具箱（loft / leg / wing / compoundEye 等），60 个物种文件各自只依赖它，互不依赖，可以照着加自己的物种。

⚠️ 需要说明：图鉴的讲解文案由 AI 撰写，未经昆虫学文献或专业人士逐条核校，不适合作为学术或教学引用来源，README 里也写明了这一点。

截图或演示视频