用途:制作一段短小的电影感 3D 片头(资料给出的时长为 8–15 秒),在代码中生成,使用 Claude Code 与 Three.js。整体结构是镜头穿过一个有灯光的 3D 场景(默认示例为夜晚雨中的街道),最后落在指定的一句话或标题上。
主要能力与要素:
- 场景:按故事选择单一设定,如夜晚街道、空办公室、凌晨五点的书桌、舞台,默认雨天夜街;包含低多边形建筑、潮湿反光地面与细雨。
- 物体作为招牌:以真实名称或附带的 logo 文件做成发光的招牌、屏幕或海报;logo 需来自真实文件,不能凭记忆重画,并以 canvas 贴图放到平面上,配合克制的泛光(UnrealBloomPass)。
- 镜头:一次缓慢平稳的推近并略微上移的运镜,掠过招牌,不抖动、不旋转。
- 标题:在最后三分之一时间出现,使用粗体窄体字,位于左下方,白色为主,关键词用品牌强调色;标题下方地面需足够暗,避免反光透过文字。
- 声音:资料建议不要省略,在代码中写出低音铺底、每次换镜头有击打、最后一句有上扬;可选低鸣加轻柔雨声,并在第一秒内淡入。
- 技术规则:每一帧完全由时间推导,包括雨(用种子生成,渲染时不用 Math.random);提供 window.seek(seconds),URL 带 ?render 时等待 seek。单个自包含 index.html,使用固定版本的 Three.js,且只使用所附文件。
使用方式(资料中的流程):
- 先确认四项输入并等待:结尾落点的那句话、场景世界、场景中的物体(真实名称或附带 logo 文件)、品牌与尺寸(一个强调色,1920×1080 或 1080×1920)。如存在 brand.md 与 MOTION.md 应先阅读;没有则先做品牌采集,或索取十六进制色值、字体与 logo 文件,否则不应称结果符合品牌。
- 将构建简报粘贴到 Claude Code 中生成 index.html。
- 构建后抽帧检查:在 1 秒、中间和最后一秒截图,确认每个招牌在手机尺寸下可读、标题后没有镜像物体、每个 logo 与文件一致。
- 自检:第一秒是否已像电影而非幻灯片;标题在手机上是否可读;小号标签(日期、说明)是否至少为预想尺寸的两倍。
导出:资料提到 HyperFrames(免费、开源),命令为 npx skills add heygen-com/hyperframes,然后 npx hyperframes render;若用于邮件或简报,另做 9 秒、小于 5MB 的 GIF(8fps、宽 540px、轻度降噪以便雨景压缩)。
适用场景:需要短版品牌开场、视频片头、节目或内容开场的制作。
限制与注意:资料中的效果要求(如“惊艳才算完成”、首三秒抓人)属于其自检准则;具体要求依赖所提供的品牌素材与 logo 文件;未提供收费、支持平台范围、兼容性细节与实际输出质量保证,暂未提供。