关于 web-sims
用于制作浏览器模拟的技能，适合大量按规则运动的对象、3D 场景或相机移动等更适合网页而非 Remotion 的内容。它指导创作者规划、构建、捕获和检查模拟，并以共享时间线协调画面节拍与声音。
主要功能
- 01判断何时用网页模拟而非 Remotion
- 02基于时间线安排画面节拍与声音提示
- 03爬行对象、叠加层和 3D 场景示例
- 04在加载时初始化有状态模拟
- 05静帧捕获与检查流程
- 06音乐或生成声音选项
适用场景
- 01制作大量独立 Agent 或粒子的动画
- 02通过相机运动讲解 3D 对象
- 03将模拟实现为 three.js 或 canvas 页面
- 04最终捕获前检查各画面节拍
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/web-sims确认已加载。
详细介绍
Web 模拟
请先阅读 sims/README.md，其中包含规范和所有命令。
何时选择此方案而非 Remotion
- 有数百个各有规则的运动对象（Agent、粒子、爬虫）。
- 有一个摄像机绕其移动或穿行的 3D 对象或机器。
- 任何用 three.js 或 canvas 页面实现比用 React 更简单的内容。
包含文字、UI 和定时显现效果的动态图形仍使用 Remotion（src/）。
工作流
- 与用户确定创意、核心时刻和时长。默认格式： 1080×1350 布局（4:5），60 fps，20–24 秒。
- 将每个节拍写入模拟项目旁的
timeline.json（章节、核心时刻、摄像机关键帧）。音效脚本也读取同一个文件。 - 从最接近的示例开始：
crawlers（DOM 文本上的 Agent）、dossier（同上，另有屏幕空间叠加层）、engine（three.js 对象，包含剖切、章节、穿越镜头、爆炸视图和生成音效）。 - 在加载时模拟所有有状态内容一次；
render(t)只读取这些内容。 - 构建：
node sims/build.mjs <name>。 - 在每个节拍处查看静帧：
node sims/capture.mjs <name> --stills 0,2,5,8,12,16,20 --cols 4 --out out/sims/<name>-review.png。 打开拼图，并按照评审流程检查：第 0 帧足够有力、每帧只有一个焦点、没有内容因泛光而过曝、手机上文字清晰可读、标签不会遮挡主体。修复后重复检查。 - 音效：音乐曲目（
--music，模拟项目会获得cfg.beats，并应踩准音乐高潮）、生成的音效底轨（例如运行python3 sims/<name>/sound.py，参见sims/engine/sound.py），或先用 ffmpeg 混合两者。 - 捕获：
node sims/capture.mjs <name> --size 1080x1350 --out out/sims/<name>.mp4，并在宣布完成前查看最终文件的拼图。
示例中的经验
- 泛光会吞噬细节：将自发光层和加法混合层保持在约 1.0 以下，仅在核心时刻提高它们的强度。
- 光滑金属加低角度阳光会产生白色条纹。在大表面上使用 roughness ≥ 0.45 和 envMapIntensity ≈ 0.5。
- 一个核心对象胜过一群对象。如果部件遮住主体，就将它们移开或淡出。
- 章节、每个步骤的一行说明，以及带有真实数值的标签，能让模拟看起来像是在解释内容，而不只是华丽的视觉效果。
- 摄像机穿过对象的效果，胜过十次环绕拍摄。
评论
支持 Markdown