【免费下载链接】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 在浏览器里实时程序化生成。而所有虫体的几何几乎都架在一套自研的放样loft建模工具箱之上——一个 1400 来行、住在 src/three/builders/kit.ts 里的文件。本文带你读懂这套地基是如何以点建面、以面成虫的。为什么是放样3D 程序化建模的最优解先说结论仓库里没有一个.glb模型文件也没有一张贴图文件。每一只虫都是从一串截面参数现场算出来的网格BufferGeometry。这带来两个好处体积归零63 种虫 18 个生活史阶段卵/幼虫/蛹/若虫全部几何都来自代码仓库几乎不含二进制资产参数可复用画成虫的同一套代码换个参数就能画出卵、幼虫和蛹。实现路径很直白昆虫身体躯干、鞘翅、角、腿节、触角节本质上都是**沿一条路径截面从粗变细再闭合的管状体**——这正是放样lofting的经典定义。项目把这套算法做成了loft()一个函数再在它上面搭了spindle()、segmentedAbdomen()、leg()、antenna()等十几个高级积木。63 只虫都是积木的排列组合。放样核心loft()的四个关键设计核心函数在 src/three/builders/kit.ts。输入是一组截面Section输出是一个封闭的网格export interface Section { at: THREE.Vector3 | [number, number, number] // 截面中心 ry: number // 上下半径Y 方向 rz: number // 左右半径Z 方向 roll?: number // 绕路径切线的扭转弧度默认 0 }截面把虫体抽象成一串椭圆环每个截面就是路径上某一点的一个椭圆。把 20 个截面串起来就是一段身体ry/rz不等就得到扁截面——独角仙那片外侧高、内侧低的半个穹顶鞘翅就是这么压出来的见 src/three/builders/rhinoceros-beetle.ts。平行传输防止截面沿路径打转最容易翻车的地方相邻截面如果各自随意定向细长的身体会像麻花一样扭起来。loft()的解法是切线定向 平行传输——先求每个截面处沿路径的切线tangent再用上一段的参考向量推当前截面的横向标架kit.ts#L392-L406。这个设计还有一个隐性红利它只依赖差值向量所以整条腿平移到哪儿放样结果都不变——这正是后来腿部骨架化62 只虫同时学会走路能成立的前提。法线与封口细节决定像不像椭圆法线按半径倒数加权扁截面的法线若按圆算侧光下会发暗失真kit.ts#L418-L422极点封口首尾截面收到一个极点半径 0 的截面自动退化成尖一头一尾各补一个顶点就封好了kit.ts#L436-L450。地基之上63 只虫共享的放样积木loft()本身是毛坯真正的生产力来自包在它外面的参数化部件——物种文件只需给尺寸 颜色 姿态函数一句话职责位置loft()核心一串椭圆截面 → 封闭网格kit.ts#L379spindle()纺锤体两端收尖的椭球昆虫的头、胸、腹节几乎都是它kit.ts#L470segmentedAbdomen()分节腹部带环沟起伏的体节蜂/蚁/蜻蜓腹部的辨识点kit.ts#L559leg()/legPair()四段嵌套关节的昆虫足62/63 个物种共用kit.ts#L718antenna()六种触角类型丝状、棒状、膝状、鳃叶状、栉齿状、刚毛状kit.ts#L882wingVeins()扇形放射的翅脉细管——鉴定目级别的关键特征kit.ts#L1057chitin()/elytra()/membrane()几丁质、鞘翅釉质、膜翅三档材质kit.ts#L244finalize()收尾居中、开阴影、算取景半径、收集可动骨架kit.ts#L1293以独角仙为例它的构建只有四步spindle()画腹部和前胸 → 22 个截面loft()出两片隆起鞘翅 →antennaPair()加鳃叶状触角 →finalize()收尾src/three/builders/rhinoceros-beetle.ts。把同样的四步换个参数就换了一只虫——这就是地基的威力改loft()一处63 只虫同时受益加一只新虫只写参数。健壮性保证让放样工具永不出 NaN放样工具箱的地基测试src/three/builders/tests/kit.test.ts专门钉死了几类最容易炸的退化输入路径首尾重合切线方向退化 → 强制兜底轴不产生NaN竖直路径参考向量与切线平行时自动换轴零半径截面尖端退化不炸扁截面法线逐顶点断言仍是单位向量输入不足 2 个截面直接抛错而不是静默产出坏几何。这种退化输入逐个钉死的思路加上全项目 4000 多个测试构成了所有物种都建在 loft 之上这里出问题就是全线崩的防线。贴图也是放样出来的零文件表面细节顺带一提表面微观层同样零文件src/three/builders/surface.ts 用 Canvas 2D 在运行时现画刻点甲虫头部的随机圆坑与纵沟纹鞘翅上的平行沟槽法线图种子化 PRNG 保证任何机器上生成同一张图。几何放样负责形状程序贴图负责质感两者合起来才是这只虫。总结一个 loft 函数撑起一座昆虫馆insect-world 的放样工具箱给3D 程序化建模提供了三个可直接抄作业的启示先做地基再做生态把loft()的边角情况全部钉死后上层 63 个物种文件几乎不再写几何算法参数即物种形态差异全部收敛为参数半径曲线、扁度、姿态角代码结构完全同构测试即门禁退化输入、镜像对称、姿态不变性都有测试守着悄悄改坏无处遁形。想自己动手按这个顺序读源码最省力src/three/builders/kit.ts 的loft()→spindle()→leg()再挑 src/three/builders/ladybird.ts 或 src/three/builders/rhinoceros-beetle.ts 看一只虫的完整装配最后翻翻 docs/roadmap.md 了解这座昆虫馆是怎么一路扩建到 63 种的。赞分享【免费下载链接】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是如何炼成的一只模型文件都没有的63种昆虫3D图鉴insect world是如何炼成的一只模型文件都没有的63种昆虫3D图鉴 insect world 是一个可交互的 3D 昆虫图鉴63 种昆虫覆盖存储吃紧要删微信记录WeChatMsg免费本地导出把聊天永久留下来存储吃紧要删微信记录WeChatMsg免费本地导出把聊天永久留下来 在家庭群里翻上半天找不到妈妈说过的那句记得吃饭想查工作群半年前发出的报价记录只为什么仓库里没有模型文件insect-world 3D昆虫图鉴的程序化生成架构为什么仓库里没有模型文件insect world 3D昆虫图鉴的程序化生成架构 insect world 是一个运行在浏览器里的可交互 3D 昆虫图鉴63上一篇Mac用户必备3步解密QQ音乐加密格式让音乐自由播放下一篇芋道源码企业级框架终极实战指南5个高效开发技巧构建完整Spring Boot应用创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
