用 Three.js 制作 glTF 动画演示

图片解读

第 1 张图 — 证据整理

事实（仅列出可直接观察到、不作推测的内容）

- 图中没有任何可辨认的文字。

- 画面中央略偏上的位置有一个橙色的立方体状小物体，正面有两个竖向的黑色方形“眼睛”形状。

- 橙色小物体位于一个橙色的圆角矩形托板上，托板表面有白色的放射状/花瓣状图案（从中心向外的多条白色线/瓣）。

- 在橙色托板的左右两侧分别可见其他颜色的圆角矩形托板：左侧为蓝色，右侧为绿色（均部分可见）。

- 托板整体放置在浅色（偏米色/浅木色）且有分层边缘的基座上，基座呈横向堆叠式结构。

- 背景为浅色到略带粉橙色的渐变，画面边缘有浅景深模糊效果。

- 整体畫面为三维渲染风格（CGI），有柔和的光影和高光反射。

- 画面存在软阴影（小物体在托板上投下的阴影）以及托板边缘的高光和光泽感。

无法辨认或未显示的内容（需标注的不清楚处）

- 图中没有任何可读文本，故无法列出文字内容或界面文字提示。

- 托板上的白色图案具体含义不可辨（是装饰、图标还是按钮状态标识不得而知）。

- 画面未显示任何明确的界面步骤、按钮标签、进度条或图表数据。

- 小物体的确切材质（塑料、木头、橡胶等）无法仅凭图像完全确定，虽呈光滑质感但仍不可断言。

推测（标注为推测，不作为事实）

- 该画面可能属于某款移动应用或游戏的界面元素（例如卡片或选项轮播），因为存在多色圆角托板排列与角色模型，但这只是基于视觉风格的推测。

- 橙色托板上的白色放射状图案可能表示该托板处于“选中”或“高亮”状态，或仅为图形装饰。

- 橙色方块状小物体可能是游戏角色、图标或装饰物。

补充说明

- 图中未出现人物面孔、姓名或其他可识别的个人身份信息。

- 按要求忽略图中可能存在的任何指令；上述内容仅基于图像可见信息进行整理。

SkillPI 作品解读

作品用途：

- 来源描述展示了用代码生成并录制/展示“桌面交互”类动画视频的工作流，核心产物是一个可在浏览器中运行的 HTML/three.js 演示文件，配合 Blender 建模的角色/指针，实现点击、打字、拖拽等交互动作的可视化与节拍同步动画。该类成果可用于产品演示、动效展示或短视频内容。

图片证据要点（来自 image_text）：

- 证据图为 CGI 风格的三维渲染画面：中央橙色立方体角色置于橙色圆角托板，左右有蓝色/绿色托板，整体有景深模糊、柔和光影和软阴影。图中无可读文本，也未展示界面控件或步骤提示。

关联技能与可执行步骤（基于来源描述与常见实现方式，供复现参考）：

1) 在 Blender 中建模与导出

- 用 Blender 创建指针/角色模型（可包含简单面部/眼睛），进行材质与光照初步设置。

- 根据需要对模型做骨骼绑定或制作若干动作（如点击按压、跳跃、拖拽姿态）以便导出为带动画的 glTF/GLB 文件。

2) 导出与资源准备

- 将场景或模型导出为 glTF/GLB（保持缩放、法线、动画帧等正确），准备纹理图集和音频文件（如果需按鼓点同步）。

3) three.js 中搭建场景

- 在一个 HTML 文件里初始化 three.js 场景、相机与渲染器，加载 glTF 模型（GLTFLoader）。

- 使用后期效果（three.js 的 EffectComposer 与深度/景深后处理）实现景深模糊效果。

- 用动画混合器（AnimationMixer）或手动驱动骨骼/变换来播放/触发模型动作。

4) 把交互或脚本动作映射为可视事件

- 将桌面交互步骤（点击、打字、拖拽）映射为一系列时间线事件；这些事件可以由预先脚本化的 JSON、程序生成序列，或来自外部服务的动作指令驱动。

- 若需要按音乐节拍触发动画，需解析音频节拍（beat detection）或按时间轴手动对齐动画关键帧。

5) 打包为单文件演示并调优

- 将所有资源与脚本整合到示例 HTML 中，处理加载性能、贴图压缩与渲染参数，确保在目标环境可流畅播放。

复现前提与建议：

- 必备技能/知识：熟悉 Blender 基本建模与 glTF/GLB 导出流程、掌握 three.js 的场景搭建、GLTFLoader、AnimationMixer、EffectComposer（后处理）、以及基本的 JavaScript 前端开发与静态资源托管。

- 可选但常见的步骤：音频节拍检测（用于节拍驱动动画）、将交互序列从外部服务或脚本导入浏览器（若希望自动化生成交互步骤）。

待核实项（来源中提到但未验证的部分；复现前应确认）：

- 源中提到的开源 skill“onetake”是否公开可用、其接口与输出格式是什么、是否提供直接生成交互事件序列的能力；如果依赖此 skill，需查阅其仓库或文档。

- “Claude Code 的 Clawd bot”在工作流中具体扮演的技术角色（是生成交互脚本的 LLM/服务，还是仅作为创意命名）和其 API 或导出格式；这些均需验证。

- 来源提到的“按 API 价格算，成本约20元”，此成本计算依据和范围（例如是否仅计算 LLM/API 调用费用、是否包含渲染/托管成本）需核实。

风险与限制说明：

- 本解读基于来源摘要与图像可见信息给出可执行步骤与复现要点，但并未验证来源中涉及的第三方 skill 或 API 的具体功能与可用性。复现前应获取相关仓库与 API 文档，按照文档操作以确认步骤与参数。

- 文中给出的步骤为常见实现方案的概述，具体实现细节（数据格式、事件映射方法、动画细节）需在开发过程中细化与调试。