【免费下载链接】bible-strong-avatar-lab项目地址https://gitcode.com/gh_mirrors/bib/bible-strong-avatar-lab点击查看免费下载Bible Strong Avatar Lab 是一款基于浏览器的程序化头像创作工作室。本指南面向新手教你用 3D 风格几何原语快速搭建角色身体从选择主形状、放置次要形状到调整位置与旋转最终导出可嵌入网页的 React / JavaScript 头像。为什么是3D 风格几何原语你可能以为做 3D 角色需要建模软件。其实 Bible Strong Avatar Lab 的思路是用一组参数化的 3D 风格几何原语球体、立方体、胶囊体等拼出身体再投影成 2D SVG 渲染。每个形状只有 6 个基础参数width/height/depth/roundness/position/rotation新手也能秒懂透视、投影全部由引擎自动计算源码见 geometry.ts你不需要理解数学成品是一份.avatar.json定义React 和无框架 JavaScript 共用同一份文件视觉表现完全一致参见 README.md 的 Export formats 章节。6 种基础形状清单身体由两种角色构成主形状primary承载眼睛、定义面部坐标系次要形状nodes围绕主形状自由摆放用来堆叠出耳朵、身体、装饰等部件。可选的 6 种原语定义在 body.ts原语中文名适合做什么特色参数sphere球体经典圆脑袋、腮部—cube立方体方块脸、机器人圆度roundness0 为直角、拉高变圆润capsule胶囊体身体、柱子—cylinder圆柱体脖子、天线边缘圆度、整体圆度cone圆锥体帽子、帽子尖尖端圆度、底部圆度diamond菱形体钻石脸、晶体圆度每种形状内置了一套默认尺寸预设切换类型时自动套用预设值见 surfaces.ts。打开 Studio三步搭建你的第一个身体1️⃣ 启动工作室项目完全运行在浏览器里无需账号和后端。本地运行仓库为只读clone 后执行git clone https://gitcode.com/gh_mirrors/bib/bible-strong-avatar-lab cd bible-strong-avatar-lab pnpm install pnpm dev打开 http://localhost:5173 即可进入。选择或新建一个头像后左侧是实时画布右侧是检查器。2️⃣ 在身体构建面板选主形状进入头像编辑器找到右侧的身体构建Construction du corps面板——面板说明为选择主形状然后在其周围组合基础形状组件源码见 BodyConstructionAccordion.tsx。展开最顶部的主形状条目带主要徽标标注承载眼睛即可在 6 张形状卡片间点选切换并调整缩放等比调整120–300 uu 为内部单位宽度 / 高度 / 深度单独拉伸每个维度圆度类参数仅对 cube / diamond / cylinder / cone 出现边缘圆度、整体圆度、尖端圆度、底部圆度。3️⃣ 添加并摆放次要形状点击面板底部的 添加形状选择一种原语即可加入场景。新形状默认以约 1/3 的预设尺寸出现在主形状一侧方便直接上手摆放。点击列表中的任意形状可选中它此时可操作形状设置缩放、宽度/高度/深度、圆度局部位置X / Y / Z 三个数值局部旋转X / Y / Z 三个角度单位 °复制 / 删除快速堆叠对称部件复制件会自动向右下偏移 14 u。每个次要形状拥有独立的局部尺寸、位置和旋转见 CONTEXT.md 的 Invariants互不影响。局部操纵 Gizmo拖一拖就懂了 选中次要形状后画布上会出现一个局部控制器Gizmo local三条轴代表 x/y/z 移动方向三个圆环代表绕各轴旋转。拖一个轴→ 沿该轴平移形状拖一个环→ 绕该轴旋转形状。这比手输数字直观得多底层由 geometry.ts 中的translateBodyNodeAlongLocalAxis与rotateBodyNodeAroundLocalAxis实现。偏好精确控制时直接修改面板里的局部位置 / 局部旋转数值即可两种方式等效。 小提示也可以不旋转头部直接在画布面上拖动头像来整体调整朝向——透视和遮挡关系会自动算好。常用参数速查表参数作用范围说明缩放主/次要形状等比缩放保持长宽高比例宽度 / 高度 / 深度主/次要形状独立控制每个维度圆度roundnesscube / diamond / cylinder0 棱角分明越大越圆整体圆度morphRoundnesscylinder / cone把轮廓整体向椭球方向 morph尖端 / 底部圆度cone分别控制圆锥顶点与底边局部位置 X/Y/Z次要形状形状在主形状坐标系中的位置局部旋转 X/Y/Z次要形状形状自身的朝向角度透视perspective表情/姿态模拟面部深度影响立体感默认文档里就有一个现成案例蓝色球体头像 Strobi以及用两个球体加圆柱堆出来的方块角色 Freddy结构可直接参考 defaultStudioDocument.json。搭完身体之后表情、动画与导出 ⚡身体只是角色的一半。得益于主形状承载面部坐标系的设计表情与身体解耦——表情基于公共 facial frame 定义所以换一种身体形状已有表情依然兼容见 CONTEXT.md。接下来按 Studio 的四个区域走即可流程说明见 README.md姿势Pose旋转头部、调整中性眼睛表情Expressions保存命名的视觉预设如 sleepy、curious动画Animations把表情排上时间轴设置时长、过渡与眨眼导出Export下载.avatar.json配合bible-strong/avatar-react或bible-strong/avatar-web集成Photo Mode把当前画面导出为 SVG / PNG支持透明、纯色与渐变背景Studio project整个项目打包成 JSON 备份可跨浏览器导入。常见问题Q最多能加多少个形状A主形状之外最多 16 个次要形状MAX_BODY_NODES 16定义于 body.ts达到上限后添加形状按钮会自动禁用。Q换了主形状类型眼睛会错位吗A不会。眼睛绘制在公共面部坐标系上会重新投影到新的表面行为保持一致。Q我的作品存在哪里A整个 Studio 文档自动保存在浏览器 localStorage没有远程后端。清空浏览器数据前建议用Export → Studio project导出 JSON 备份。从 6 种几何原语出发你已经在 Bible Strong Avatar Lab 里搭出了第一个有身体、有表情、可导出的程序化角色。打开工作室试着用两个胶囊加一个圆锥做只小企鹅吧 赞分享【免费下载链接】bible-strong-avatar-lab项目地址https://gitcode.com/gh_mirrors/bib/bible-strong-avatar-lab点击查看免费下载相关推荐imba-language-core 架构全解用 Volar 虚拟 TypeScript 把 Imba 变成一等公民imba language core 架构全解用 Volar 虚拟 TypeScript 把 Imba 变成一等公民 本文剖析仓库中 packages/imbTabby 代码补全配置指南[completion] 参数调优与自定义语言支持Tabby 代码补全配置指南 completion 参数调优与自定义语言支持 Tabby 是一款可自托管的 AI 编码助手代码补全Code CompletUnison 回归测试解析fix2358 与 delay.impl 调用约定修复Unison 回归测试解析fix2358 与 delay.impl 调用约定修复 导读 fix2358 是 Unison 语言仓库当前仓库 gh_mirro上一篇终极指南如何快速掌握 Karma JavaScript 测试运行器下一篇Finagle HTTP/2 指标完全指南upgrade、streams 与会话生命周期监控创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考