SuperAPI AI 工具集

remotion-3d-background-developer

前端与建站

查看项目

更新于 10-16 03:41

技能介绍

用途:为 Remotion 视频生成程序化 3D 背景,使用 @remotion/three(ThreeCanvas + react-three-fiber)与自定义 GLSL 片元着色器,实现逐帧精确渲染的彩色动态背景。

主要能力:提供多种背景风格参考,包括 liquid-gradient(流体、有机、彩色团块)、plasma(电光、霓虹、迷幻)、aurora(极光、波浪)、galaxy(星空、星云)、geometric(几何、低多边形、晶体)。用户描述模糊时默认使用 liquid-gradient。附带高冲击力配色方案与 GLSL 工具函数(hash、noise、fbm、palette)。

必要用法与关键约束:安装命令为 npx remotion add @remotion/three,react-three-fiber 作为其 peer dependency 一并提供。禁止使用 @react-three/fiber 的 useFrame(),否则会脱离 Remotion 时间线导致闪烁;必须用 Remotion 的 useCurrentFrame() 驱动全部动画,并把 frame 作为 shader uniform 传入。所有内容包裹在来自 @remotion/three 的 <ThreeCanvas width={width} height={height}> 中,尺寸取自 useVideoConfig();ThreeCanvas 内的 <Sequence> 必须设置 layout="none"。2D 全屏背景使用 orthographic,planeGeometry args={[2, 2]} 即可铺满正交视图。uniforms 存入 useRef 并直接更新其 value,避免每帧重建造成 GC 压力。背景可通过 AbsoluteFill 绝对定位置于其他内容之下;用 interpolate 与 durationInFrames 计算进度,可在 GLSL 中混合不同配色实现颜色过渡。

适用场景:Remotion 视频的片头、标题页、转场等需要动态彩色背景的场合。

限制:资料未提供具体收费、价格、平台支持范围与性能数据,暂未提供。