霜冻序列摄像机轨道 是做什么的?
一个完整的 22.5 秒冰霜序列:标志、第一段文字、第二段文字、碎裂和淡出。摄像机围绕固定物体轨道运行,在正面经过时减速以便阅读。同一粒子场承载每个过渡。可自定义两段文字时刻和 SVG 标志;源文件包含可编辑的摄像机和组装时间轴。
合成 ID:frost-sequence-rig。时长 22.5 秒,30 fps,1920×1080。
文件
frost-sequence-camera-orbit.html(131 KB)assets/example-logo.svg(1 KB)assets/fonts/Geist-Bold.ttf(65 KB)assets/fonts/Geist-OFL.txt(4 KB)assets/fonts/Geist-Regular.ttf(65 KB)assets/fonts/Geist-SemiBold.ttf(65 KB)assets/frost.js(1.5 MB)assets/Three-LICENSE.txt(1 KB)assets/ThreeMeshBVH-LICENSE.txt(1 KB)assets/OpentypeJS-LICENSE.txt(1 KB)assets/Clipper-LICENSE.txt(3 KB)assets/gsap-3.14.2.min.js(128 KB)assets/GSAP-NOTICE.txt(1 KB)assets/logo.svg(1 KB)assets/shards-atlas.png(安装时从 CDN 获取)assets/test-mark.svg(1 KB)assets/textures/bluenoise64.png(12 KB)assets/textures/ice-inclusions-generated.png(安装时从 CDN 获取)
安装
使用 npx hyperframes add frost-sequence-camera-orbit 安装;默认情况下,上述文件会放置在 compositions/frost-sequence-camera-orbit/ 目录下。然后在宿主 index.html 中挂载该块:
<div
data-composition-id="frost-sequence-rig"
data-composition-src="compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html"
data-start="0"
data-duration="22.5"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
通过直接定位合成文件,使用自定义值渲染:
npx --yes [email protected] render 'compositions/frost-sequence-camera-orbit/frost-sequence-camera-orbit.html' --variables '{"headline1":"Hard to|break.","headline2":"Easy to|remember."}'
变量
运行时通过 window.__hyperframes.getVariables() 读取;在合成根元素上声明为 data-composition-variables(单引号属性,纯 JSON)。
| id | 类型 | 默认值 | 标签 / 范围 |
|---|---|---|---|
headline1 | string | `"Hard to | break."` |
headline2 | string | `"Easy to | remember."` |
logoUrl | string | "assets/logo.svg" | 标志 SVG 资源路径(在 Assets 中上传,然后粘贴路径)最多 200 个字符 |
assemblyMode | enum | "hybrid" | 组装响应(physical |
materialBaseColor | color | "#ffffff" | 基础颜色 |
baseRoughness | number | 0.31 | 基础粗糙度 0–0.5 步长 0.005 |
materialTransmission | boolean | true | 透射 |
materialBacklight | number | 0.27 | 冰面背光 0–2 步长 0.01 |
ior | number | 1.675 | 折射率 1–2 步长 0.005 |
thicknessScale | number | 2.04 | 厚度缩放 0.1–3 步长 0.01 |
materialAbsorption | boolean | true | 吸收/色调 |
attenuationColor | color | "#d5f4ff" | 衰减颜色(白色 = 无吸收,透明玻璃) |
attenuationDistance | number | 6.54 | 衰减距离 0.05–12 步长 0.01 |
materialDispersion | boolean | false | 色散 |
dispersion | number | 0.12 | 色散(0 = 关闭;开启/关闭需要重新加载) 0–0.3 步长 0.005 |
materialReflections | boolean | true | 反射 |
envIntensity | number | 2.04 | 环境强度 0–3 步长 0.01 |
specularIntensity | number | 1.44 | 高光强度 0–2 步长 0.01 |
materialFrost | boolean | true | 霜冻 |
materialInteriorFrost | number | 0 | 均匀霜冻 0–1 步长 0.01 |
frostScale | number | 0.7 | 缩放 0.2–6 步长 0.05 |
frostThreshold | number | 0.62 | 阈值(1 = 无霜冻,透明玻璃) 0–1 步长 0.01 |
frostSoftness | number | 0.24 | 柔和度 0.01–1 步长 0.01 |
frostRoughness | number | 0.73 | 粗糙度 0–1 步长 0.01 |
frostDiffuse | number | 0.11 | 漫反射(霜冻区域捕捉光线的程度) 0–1 步长 0.01 |
materialSurfaceBumps | boolean | false | 物体表面凹凸/裂纹缺口 |
materialCrystals | boolean | true | 晶体凹凸 |
crystalBump | number | 0.01 | 晶体凹凸 0–1 步长 0.01 |
crystalScale | number | 4 | 晶体缩放 4–80 步长 1 |
materialGrain | boolean | true | 颗粒凹凸 |
materialGrainAmount | number | 0.47 | 颗粒强度 0–2 步长 0.01 |
materialGrainScale | number | 150 | 颗粒缩放 1–150 步长 1 |
materialCutNormals | boolean | true | 断裂法线 |
materialMicro | boolean | true | 微凹凸 |
microBump | number | 0.445 | 微凹凸 0–1 步长 0.005 |
microScale | number | 10 | 微缩放 10–200 步长 1 |
microCoverage | number | 0.25 | 微覆盖 0–1 步长 0.01 |
bumpMaskScale | number | 1.45 | 遮罩缩放 0.1–6 步长 0.05 |
materialRipples | boolean | true | 波纹 |
rippleBump | number | 0.22 | 波纹凹凸 0–1 步长 0.01 |
rippleScale | number | 23 | 波纹缩放 2–30 步长 0.5 |
materialSmudges | boolean | true | 污渍 |
smudgeAmount | number | 0.78 | 数量 0–1 步长 0.01 |
smudgeCoverage | number | 0.58 | 覆盖 0–1 步长 0.01 |
smudgeMaskScale | number | 1.85 | 遮罩缩放 0.1–6 步长 0.05 |
smudgeAnisotropy | number | 16.5 | 各向异性 1–20 步长 0.5 |
smudgeRoughness | number | 0.75 | 粗糙度 0–1 步长 0.01 |
smudgeWhiteness | number | 0.035 | 白度 0–0.5 步长 0.005 |
smudgeScale | number | 1.3 | 缩放 0.5–10 步长 0.1 |
materialCracks | boolean | true | 裂纹 |
crackLargeScale | number | 2.45 | 大尺度缩放 0.3–8 步长 0.05 |
crackWarp | number | 0.22 | 扭曲 0–1.5 步长 0.01 |
crackCoverage | number | 0.19 | 覆盖 0–1 步长 0.01 |
crackRegionScale | number | 1.8 | 区域缩放 0.1–4 步长 0.05 |
crackRegionCoverage | number | 0.6 | 区域覆盖 0–1 步长 0.01 |
veinScale | number | 8 | 脉纹缩放 1–20 步长 0.25 |
veinContrast | number | 0.55 | 脉纹对比度 0–1 步长 0.01 |
crackWidth | number | 0.0025 | 宽度 0.0005–0.02 步长 0.0005 |
crackBrightness | number | 0.65 | 亮度 0–3 步长 0.01 |
crackDarkness | number | 0.69 | 暗度 0–1 步长 0.01 |
crackRefraction | number | 0.076 | 折射 0–0.1 步长 0.001 |
crackSurfaceStrength | number | 0.16 | 表面强度 0–1 步长 0.01 |
fineScale | number | 18.4 | 精细缩放 2–20 步长 0.1 |
fineAmount | number | 0.52 | 精细量 0–1 步长 0.01 |
fineCoverage | number | 1 | 精细覆盖 0–1 步长 0.01 |
materialScatter | boolean | true | 内部散射 |
materialInclusionScale | number | 0.05 | 内含物缩放 0.05–3 步长 0.01 |
materialInclusionAmount | number | 2 | 摄影内含物 0–2 步长 0.01 |
interiorScatter | number | 0.09 | 内部散射 0–1 步长 0.01 |
materialClearcoat | boolean | true | 清漆 |
clearcoat | number | 0 | 清漆 0–1 步长 0.01 |