【免费下载链接】insect-worldInteractive 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.项目地址https://gitcode.com/gh_mirrors/in/insect-world点击查看免费下载insect-world 是一个运行在浏览器里的交互式 3D 昆虫图鉴63 个物种、14 个目每一只虫的几何体都由 TypeScript Three.js 在浏览器里实时程序化生成仓库里没有任何模型或贴图文件。它最耐看的一个镜头是羽化——刚出蛹的成虫把皱缩成一小团的翅膀撑开、同时从下垂抬回静止姿态的 3.2 秒。这也是整个项目唯一一段连续形变其余阶段之间一律不 morph。今天就把这个克制讲清楚为什么不做、为什么偏偏这一段要做、以及它是怎么做出来的。先说结论阶段之间跳着变不是偷懒insect-world 里有 8 个物种做了一条完整的生活史路线卵、幼虫或若虫、蛹、成虫比如双叉犀金龟的一生——土里的卵、白色 C 形蛴螬、带角雏形的褐蛹、成虫注意这些阶段之间没有任何毛虫慢慢扭成蝴蝶式的过渡动画。这不是没做而是故意不做原因写在项目自己的设计文档 2026-08-18-motion-design.md 里毛虫变蝴蝶在生物学上本来就不是连续形变组织解离 成虫盘发育硬 morph 出来好看但错。项目有一条贯穿始终的立场每一处形态都要能在代码里追溯到形态学依据。拿一个顶点插值把幼虫揉成成虫视觉上很炫但那是假的——蛹期里虫体的组织先被分解、再由成虫盘重新发育不存在一条连续的形变路径。好看但错的东西放进一个以可信为立身之本的图鉴是负资产。所以架构上直接做成了离散阶段 设计过的转场每个阶段是独立建模的完整模型见 stages.ts 的阶段注册表builders/stages/目录下一个文件一个阶段阶段切换就是切换不插值。那为什么翅展开可以做成连续因为它是真的连续。刚出蛹的成虫翅膀不是一片摊开的膜而是一小团皱缩的软组织靠血淋巴泵入、在几十分钟里撑开随后硬化定形。这一段在自然界里本来就是连续发生的做成连续动画等于如实还原而不是伪造。设计文档里称这是最值钱的镜头。实现代码就一个文件emerge.ts核心不到 50 行。思路对新手也很友好1. 缩放枢轴不改网格。每片翅挂在一个枢轴pivot上枢轴原点就在翅基。把枢轴从 16% 缩到 100%整片翅就像朝翅基收拢再摊开——那正是皱缩展开的样子而且翅基始终钉在体侧不动不会出现翅漂离身体的违和感。2. 先快后慢的曲线1-(1-u)³。真实的翅展开就是这个节奏血淋巴一开始压力最大、撑得最快接近满幅时阻力上升而变慢。用三次缓出而不是 smoothstep是因为 smoothstep 两头都慢会吃掉开头那一下的爆发感——而那一下正是这段镜头最好看的部分。3. 展翅的同时翅是下垂的。刚撑开的翅还没硬化撑不住自重会先耷拉着随展开逐渐抬回静止姿态。这一笔让它从一片在变大的膜变成一只刚爬出来的虫。几个关键参数都带着明确的生物学理由参数值为什么是这个值起始尺度startScale0.16真实刚羽化的翅约为展开后的 1/6~1/5这个比例本身就是它居然能撑那么大的看点下垂角droop0.42 弧度 ≈ 24°再大读成翅断了再小看不出软动画时长3.2 秒见 InsectCanvas.tsx 的EMERGE_SECONDS两个只有踩过坑才知道的细节缩放必须做乘法不能直接赋值。翅膀的左右镜像是靠scale.z ±1实现的如果展开时用setScalar()直接写一个正数左翅那个负号就被抹掉整片翅当场翻到对侧去——而且尺寸、位置、旋转全都正确断言测不出来只有人眼看得出不对。所以 emerge.ts 里缩放一律以构建时记录的restScale为基准做乘法。每一帧最多推进 1/30 秒。这个项目用按需渲染暂停后醒来的第一帧 dt 常常是几百毫秒起步。不夹住的话一帧就能把 3.2 秒的羽化全部走完——用户什么也没看见。夹住之后卡顿时羽化只是慢一点但看得见远好过准时但看不见见 InsectCanvas.tsx 的注释。亲眼看看这段动画打开任意一只做了生活史的物种帝王蝶、柞蚕蛾、独角仙、西方蜜蜂、黄萤、蜣螂、黑蚱蝉、碧伟蜓在底部点开生活史卡片翻到蛹、再翻一步到成虫——成虫加载出来的那一刻就开始展翅全程 3.2 秒。值得一提的是README 里那段羽化 GIF 不是逐帧手调的而是 make-emerge-gif.mjs 打开线上同一份代码、把浏览器合成器推出来的帧原样收下来的实录——动画有多诚实从这条流水线就能看出来。用测试把看起来对钉死左翅不许翻到对侧进度单调不回缩走完必须精确落回静止态——这些都是几何合法、动画在跑、断言全绿只有人眼看得出不对的那一类问题。项目把它们全部写成了测试emerge.test.ts镜像符号u 0 / 0.3 / 0.7 / 1全程检查scale.z的符号与构建时一致单调撑开21 个采样点逐个验证进度越大翅越大中途不回缩精确归位resetEmerge()之后缩放与旋转与静止态逐位相等——停在 0.99 倍的翅永远比别的虫小一点点小到说不出哪里不对但它就是不对。小结insect-world 对连续形变的态度可以概括成一句话自然界里连续发生的才配做成连续动画。毛虫变蝴蝶不连续所以只做离散阶段翅从皱缩撑开是真的连续所以把它做成了全项目唯一一段 morph 式的过渡——用枢轴缩放、缓出曲线和下垂抬起三样都不难难的是知道哪些地方该忍住不做。这种克制正是这个零资产、纯代码生成的图鉴能一直保持可信的原因。赞分享【免费下载链接】insect-worldInteractive 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.项目地址https://gitcode.com/gh_mirrors/in/insect-world点击查看免费下载相关推荐Pensieve开源许可证解析你可以做什么和不可以做什么Pensieve开源许可证解析你可以做什么和不可以做什么 开源软件的自由使用和分发离不开许可证的规范。Pensieve作为一款专注于本地数据掌控的屏幕录制工具戴森球计划工厂蓝图仓库 FactoryBluePrints4 步装好直接放戴森球计划工厂蓝图仓库 FactoryBluePrints4 步装好直接放 想给产线提速翻群文件找增产剂单片下了好几张放上去产能还是不够。Factory数据集Vibe-Vibe为什么要把 Vibe Coding 项目带回本地以及第一次导出与命名怎么做Vibe Vibe为什么要把 Vibe Coding 项目带回本地以及第一次导出与命名怎么做 本文基于 Vibe Vibe 开源教程基础篇 2.1 节《为什教程Vibe Coding提示工程人工智能上一篇公众号开始推 9Router开源 AI 网关从技术圈走向大众的破圈信号下一篇Apache Beam 流式输入连接器全解析与 Spark 的对比、配置实战与源码级实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考