mcpField
F
fal-regenerate-3d

fal-regenerate-3d

github.com/fal-ai-community创意与媒体257397 次安装24 周前更新
代码仓库

关于 fal-regenerate-3d

fal-regenerate-3d 是用于构建静态 Three.js 角色选择体验的技能，可生成 3D 资源。它提供角色、伙伴、材质和视频背景的端到端流程，并支持在浏览器中创建额外角色。

主要功能

  1. 01生成绑定骨骼并带动画的角色 GLB
  2. 02创建伙伴生物 GLB
  3. 03生成角色专属 PBR 地板贴图
  4. 04添加生物群系主题循环视频背景
  5. 05将资源打包到静态 Three.js 页面
  6. 06在浏览器中实时创建角色

适用场景

  1. 01构建多角色 3D 网页体验
  2. 02制作配套的角色与伙伴资源
  3. 03让访客在浏览器中生成并添加角色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fal-ai-community/skills --skill fal-regenerate-3d

安装后在 Claude Code 中输入/fal-regenerate-3d确认已加载。

详细介绍

fal-regenerate-3d 技能

运行时： 资源生成步骤通过 genmedia CLI（FLUX.2 / GPT-Image-2 / Meshy v6 / Seedance / 等）运行。最终交付物是一个静态 HTML 页面，使用 Three.js，生成的资源会打包到页面中。命令语法请参阅 genmedia 技能；如果尚未安装，请运行一次 genmedia init。

使用 fal.ai 模型打造精致的多角色 3D 网页体验的端到端方案。 本方案正是 fal-roster.vercel.app 背后的实现：一款赛博朋克风格的角色选择器，包含 10 名独特的行动人员，每位都有配套的伙伴生物、主题环境地板纹理、动态背景和色彩调色板。

构建内容

每个角色都包含：

  • 一个风格化 3D 角色 GLB（已绑定骨骼并加入动画，动画已烘焙到文件中）
  • 一个伙伴生物 GLB（小型静态模型，主题与角色匹配）
  • 一个专属 PBR 地板（生成了 basecolor / normal / roughness / metalness 全套贴图）
  • 一个循环播放的视频背景，主题与生物群系相符
  • 一个驱动整个 UI 的三色色彩调色板（CSS 自定义属性）
  • 一张用于角色列表卡片的裁剪肖像图

所有内容都打包到一个带有 Three.js 场景的静态 HTML 页面中。压缩后，GLB 文件总计约 25–35 MB。

流水线

1. GPT-Image-2 → 1024x1536 character full-body T-pose (per character)
2. Meshy v6 → image-to-3d, enable_rigging=true, animation_action_id={chosen}
 → animated GLB (idle, dance, alert, etc.)
3. GPT-Image-2/edit → companion creature image, color-locked to character palette
4. Meshy v6 → image-to-3d, enable_rigging=false → static creature GLB
5. PATINA → fal-ai/patina/material/extract on the character image,
 returns basecolor + normal + roughness + metalness for the floor
6. Seedance 2.0 → fal-ai/bytedance/seedance-2.0/fast/image-to-video, 8s loop
7. gltf-transform CLI → resize 1024 → webp q80 → draco
 (typically 95–96% size reduction, ~400–800 KB final)
8. Three.js scene → MeshStandardMaterial floor with alphaMap circular cutout,
 mirrored reflection (refl.y = root.y, scale.y = -1),
 breathing animation on companions,
 per-character palette via CSS custom properties (--c1/--c2/--c3),
 per-character floor texture swap on character click,
 transition lines + radial flash on swap

创建专属角色流程

持有 FAL 密钥的访客可以直接在浏览器中实时生成自己的角色和伙伴：

flux-2 klein 9b (text-to-image)
 └─ character full-body image
 ├─ Meshy v6 (rigged + animated) → character GLB
 └─ flux-2 klein 9b/edit → companion image
 └─ Meshy v6 (no rig) → companion GLB

费用：每次生成约 2–3 美元（调用 fal 4 次）。生成在后台运行，点击 Generate 后弹窗关闭，用户可以在生成期间继续使用体验。CREATE YOUR OWN 卡片会变为加载状态，之后显示为新的角色卡片，并带有 ↻ re-create 按钮。

使用的 fal 关键端点

步骤端点
角色图像（精选）openai/gpt-image-2
角色图像（实时生成）fal-ai/flux-2/klein/9b
伙伴图像fal-ai/gpt-image-2/edit 或 fal-ai/flux-2/klein/9b/edit
3D 角色/伙伴fal-ai/meshy/v6/image-to-3d
专属角色地板 PBRfal-ai/patina/material/extract
背景视频fal-ai/bytedance/seedance-2.0/fast/image-to-video
Logo / 图标清理fal-ai/bria/background/remove

Meshy 动画 ID

精选舞蹈 / 待机动作 ID（完整列表见 https://docs.meshy.ai/en/api/animation-library）：

ID动画
0待机（默认）
2警戒
36困惑（挠头）
48照镜子
64通宵舞蹈
405欢快舞蹈，伴随摆手动作
591嘻哈舞蹈
64–83各种流行舞蹈变体

Three.js 场景说明

  • 地板：使用 PlaneGeometry(7, 7, 220, 220)，通过径向渐变 alphaMap 裁切成圆盘。高细分度可实现真实的 displacementMap（使用 basecolor 作为高度图）。
  • 倒影：克隆根对象，设置 scale.y = -1、BackSide、depthWrite = false、renderOrder = -1。对于原点位于脚部的角色，设置 refl.position.y = root.position.y 可显示镜面倒影；地板的 transparent = true; opacity ≈ 0.5 可让倒影透出来。
  • 呼吸效果：每帧执行 scale.setScalar(base * (1 + sin(t*1.3)*0.025))，并让伙伴沿 Y 轴轻微上下浮动。倒影会同步浮动，保持镜像效果一致。
  • 调色板切换：使用 :root.style.setProperty('--c1', hex) 等设置颜色。每个 UI 元素（迷你趋势图、脉冲效果、条形、模型标签、边缘地图圆点）都从 var(--c1) / var(--c2) 获取颜色。
  • 地板切换：使用 texLoader.load() 从 assets/floor/{charId}/ 加载 4 张 PBR 贴图，释放旧贴图，并将 floorMat.color 设回白色（因为 basecolor 已经采用角色主题色）。
  • 过渡效果：点击角色时，9 条对角线扫过视口（@keyframes tfx-sweep），并伴随径向闪光；背景视频在两个 <video> 元素之间交叉淡入淡出；角色 GLB 滑出，新角色滑入。

参考实现

成本参考（精选构建）

一个完整角色的成本：

步骤估算成本
1 GPT-Image-2（角色）$0.04
1 Meshy v6 骨骼绑定 + 动画$0.80
1 GPT-Image-2/edit（伙伴）$0.04
1 Meshy v6 静态（伙伴）$0.20
1 PATINA 地面（4 张贴图）$0.04
1 Seedance fast（背景视频）$0.08
每个角色的总成本~$1.20
10 个角色~$12

运行时支持良好的并行处理。最初的 10 个角色集合在每个阶段有 9 个并发任务的情况下，约 10 分钟便生成完成。

评论

支持 Markdown