mcpField
T
threejs-image-generator

threejs-image-generator

github.com/majidmanzarpour创意与媒体2.6k2.9k 次安装4 周前更新
代码仓库

关于 threejs-image-generator

为 Three.js 游戏制作和编辑 2D 视觉素材的 Skill，涵盖概念图、纹理、贴花、背景和 UI 美术，也可为 `threejs-3d-generator` 准备参考图。

主要功能

  1. 01生成概念图和参考图
  2. 02制作纹理与材质参考
  3. 03创建背景和 UI 美术
  4. 04编辑现有图像
  5. 05准备图生 3D 源图

适用场景

  1. 01制作角色或载具参考图
  2. 02设计地形和表面纹理
  3. 03制作游戏背景和 UI 图标
  4. 04调整现有图像风格

安装

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

$npx skills add https://github.com/majidmanzarpour/threejs-game-skills --skill threejs-image-generator

安装后在 Claude Code 中输入/threejs-image-generator确认已加载。

附带文件agents/openai.yamlscripts/generate_image.py

详细介绍

Three.js 图像生成器

Three.js 游戏的 2D 层：概念图、纹理、贴花、UI 美术，以及供 threejs-3d-generator 用于图像转 3D 的源图像。

根据实际加载的技能文件确定 <this-skill-dir>。优先在其旁边查找同级技能，然后使用运行器发现的路径。不要混用已安装的版本，也不要假定特定的主目录。

适用场景

  • 图像转 3D 参考图：角色、生物、建筑、飞船、汽车、武器、道具、拾取物、地形模块。
  • 纹理和材质参考图：地形、道路、岩石、沙地、金属、科幻面板、饰条贴图、贴花、危险标签、标牌。
  • 环境图：天空、背景、城市地平线、星云、菜单背景、视差图层。
  • UI 美术：标志、阵营标记、图标、物品卡片、技能徽章、驾驶舱贴花、GUI 面板、标题美术。
  • 编辑现有图像：风格变体、清理、调色板对齐、概念细化。

对于包含生成流程的高端图形工作，应生成有价值的 2D 图像素材，而不是默认使用手写 CSS 和纯色。尊重明确要求的程序化美术和外部服务限制。根据游戏设计选择素材，不要设定固定数量的标志、天空图或图标。

API 密钥

脚本会读取 --api-key 或 GEMINI_API_KEY。密钥绝不能写入技能文件、游戏代码或报告。

uv run <this-skill-dir>/scripts/generate_image.py probe   # GEMINI_API_KEY=SET|MISSING

仅在 shell 配置文件中定义的密钥可能不会出现在进程环境变量中。如果普通探测意外显示 MISSING，请使用 threejs-game-director/scripts/probe_asset_credentials.sh，它会加载配置文件并探测全部三个提供商。

命令

从游戏项目目录运行，以便将输出保存到项目中：

uv run <this-skill-dir>/scripts/generate_image.py \
  --prompt "your image description" --filename assets/concepts/output.png --resolution 2K

uv run <this-skill-dir>/scripts/generate_image.py \
  --input-image assets/concepts/ship.png \
  --prompt "battle-worn red racing livery with clearer material zones" \
  --filename assets/concepts/ship-red-livery.png --resolution 2K

分辨率：1K 用于快速概念图、图标和草稿图集；2K（默认值）用于生产参考图、图像转 3D、纹理、背景和 UI 面板；4K 用于主视觉闪屏图、高细节纹理参考图和大型天空图。

提示词模式

图像转 3D 参考图：

创建一张简洁的 3D 生成参考图，内容为 [素材]。单个物体居中，完整展示物体，浅色纯背景，轮廓清晰易辨，材质区域明确，适合游戏制作的 [类型/风格]，无运动模糊，不裁切任何部分，不含文字。

可绑定骨骼的角色或生物：

创建一张用于 3D 绑定的全身 [T 姿 / A 姿 / 生物侧视图] 参考图：[细节]。姿势对称，手/脚/四肢清晰可见，纯色背景，服装与解剖结构层次清晰，武器不要与手融合。

纹理或材质：

创建一张用于 [表面] 的无缝游戏纹理参考图。正交俯视，适合 PBR 的反照率，材质变化清晰，无透视效果，无烘焙的强阴影，[风格细节]。

标志、图标或 UI 美术：

为 [阵营/物品/技能] 创建清晰锐利的游戏 UI [标志/图标/徽章/面板]。轮廓适合透明背景，小尺寸下对比度高，[类型风格]，不含细小且难以辨认的文字。

天空或背景：

创建一张宽幅游戏背景图，内容为 [环境]。层次分明，地平线清晰易辨，[时间/天气/风格]，适合作为实时 Three.js 场景的背景，前景不出现主体。

集成

将概念图和图像转 3D 源图像保存到 assets/concepts/；将纹理、贴花、图标和 GUI 源图像保存到 assets/textures/、assets/decals/ 或 assets/ui/。按路径将图像转 3D 源图像交给 threejs-3d-generator。

谨慎地将 PNG 转换为运行时格式：在透明度重要时（UI、图标、贴花）使用 PNG；对于较大的不透明纹理，在管线支持时使用 JPG/WebP/KTX2。API 只是工具步骤，绝不能从游戏代码中调用。

在投入图像转 3D 或生成依赖变体前，先检查图像。检查图像在游戏中的运行时效果，而不只是确认文件已写入。用户更改要求时，保留有用的现有图像，并更新项目说明，而不是重新生成所有内容。

恢复

对于协同游戏，请使用 director 的 references/asset-recovery.md。缺少凭据或额度已用尽时，可以如实提供本地替代方案；暂时性错误则不可以。区分无效输入和身份验证错误与服务故障。对于结果不确定的付费生成，不要盲目重试：先保留现有文件，并核实服务提供方的生成结果。此命令没有类似 Tripo 的任务恢复接口。仅在依赖图像的工作受阻期间，继续独立的游戏开发工作。

报告

提示词和用途、输出路径、分辨率、是否直接使用、是否进一步编辑，或是否交给 threejs-3d-generator，以及任何剩余工作，例如压缩、分配 UV、清理 Alpha 或打包图集。

评论

支持 Markdown