xr843/insect-world · 2026 年收录

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

用代码实时生成 60 种昆虫的 3D 交互图鉴可交互的 3D 昆虫图鉴，60 个物种覆盖 14 个目。旋转、缩放、点击模型上的彩色标注点，就能看昆虫的身体构造、生活史与生态角色，配有分步讲解与真能作答的小测。既可以拿来认虫，也可以参考「不

被谁收录过

投稿原文（节选）

项目地址 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 万三角面，浏览器里构建耗时 30 90 ms 首屏 JS gzip 约 424 KB，物种代码按需分包，点到谁才下载谁表面微观（刻点／沟纹／绒面／蜂窝复眼）由程序贴图在运行时生成，不依赖图片文件交互上不留只有样子的按钮：分步讲解每翻一步，3D 镜头自己移到讲到的那个部位；剖切用裁剪平面真的切开模型；小测判对错、给解释、统计得分双主题、中英双语，4030 个测试对初学者的参考价值主要在建模层： src/three/builders/kit.ts 是一套放样工具箱（ loft / leg / wing / compoundEye 等），60 个物种文件各自只依赖它，互不依赖，可以照着加自己的物种。 ⚠️ 需要说明：图鉴的讲解文案由 AI 撰写，未经昆虫学文献或专业人士逐条核校，不适合作为学术或教学引用来源，README 里也写明了这一点。截图或演示视频

← 看全部项目