xr843 /
insect-world
（English： ） 可交互的 3D 昆虫图鉴 —— 旋转、缩放、点击模型上的彩色标注点，看 60 种昆虫的身体构造、生活史与生态角色。60 个物种覆盖 14 个目。 每一只虫的几何体都是 TypeScript 在浏览器里实时算出来的，仓库里没有一个 .glb／.gltf，也没有一张贴图。 为什么不用现成模型 同类的解剖类站点，每个器官是一份约 3.2 MB 的 GLB 资产，属于采购或扫描来的素材。昆虫没有对应的现成资产可买，所以换…
产品配图
关于
（English： ） 可交互的 3D 昆虫图鉴 —— 旋转、缩放、点击模型上的彩色标注点，看 60 种昆虫的身体构造、生活史与生态角色。60 个物种覆盖 14 个目。 每一只虫的几何体都是 TypeScript 在浏览器里实时算出来的，仓库里没有一个 .glb／.gltf，也没有一张贴图。 为什么不用现成模型 同类的解剖类站点，每个器官是一份约 3.2 MB 的 GLB 资产，属于采购或扫描来的素材。昆虫没有对应的现成资产可买，所以换了条路：把昆虫形态参数化 —— 体分头／胸／腹三段，胸部生三对足、两对翅，附肢是分节的锥管，翅面由放射状翅脉支撑。这些写成参数以后，加一个物种只需要写一份尺寸与配色的描述，而不是再买一个模型。 代价是写实度不如三维扫描，换来的是零资产依赖、任意可扩展，以及每处形态都能在代码里追溯到形态学依据。 单个物种 1.4 万~3.6 万三角面（最小蠼螋 14,420，最大柞蚕蛾 35,732），浏览器里构建耗时 30~90 ms 首屏 JS gzip 约 424 KB；物种代码按需分包，点到谁才下载谁；桌面后期管线 103 KB 懒加载，手机不下载 表面微观（刻点／沟纹／绒面／蜂窝复眼）由程序贴图在运行时生成 交互 每个控件都有真实响应，不留只有样子的按钮： 分步讲解分 3~4 步，每翻一步，3D 镜头自己移到讲到的那个部位上 小测真能作答：判对错、给解释、统计得分 剖切用裁剪平面真的切开模型，分层让外骨骼半透明，对比在展台底部浮出对照条并可换对照物种 双主题，同一个馆的日与夜： | 浅色「标本台」 | 暗色「博物馆之夜」 | | --- | --- | | | | 需要事先说明的 60 种昆虫的讲解文案由 AI 撰写，没有经过昆虫学文献或专业人士逐条核校，适合当作「看着好玩、顺便认个形态」的读物，不适合作为学术或教学的引用来源。英文版同样是 AI 翻译、未经母语者校订；学名（拉丁二名法）两版一致，那是唯一可靠的对照锚点。发现错处欢迎开 issue。 技术栈：React 19 + Three.js + react-three-fiber + TypeScript + Vite，静态托管在 Cloudflare Pages，无后端。仓库含 4030 个测试，README 里记了一份「踩过的坑」，都是只有真跑起来才会撞上、类型检查抓不到的问题。
收录记录
- HelloGitHub·用户投稿
- 阮一峰周刊·用户投稿
- 阮一峰周刊·正刊推荐
讨论这个产品