| name | unicorn-studio |
| description | 当在 web 上嵌入并定制 Unicorn Studio 交互式动画时使用(嵌入、响应式尺寸、性能、与 UI 分层、降级方案)。 |
Unicorn Studio —— 无代码 WebGL 场景(Embed/SDK)技能
何时使用
- 设计师想要定制 WebGL 视觉,又不想手写着色器/three.js
- 你需要与文本/图片/视频分层的“设计好的”特效,并自带交互性
- 站点搭建工具:Framer、Webflow、Wix、Figma Sites 等
它是什么
- 一个场景编辑器(图层 + 特效 + 事件),可导出:
- 通过 Unicorn Studio SDK(小型 JS 库)嵌入
- 或导出 JSON/代码以获得更快/自托管的加载(取决于套餐)
关键嵌入模式
- 加载 SDK(视首屏情况可放在
<head> 或页脚):
- 从 jsDelivr 引入 UMD(带版本号)
- DOM 就绪后调用
UnicornStudio.init() 一次
- 给容器元素添加属性:
data-us-project="PROJECT_ID"
- 可选性能/行为参数:
data-us-scale(渲染缩放)
data-us-dpi(分辨率倍数)
data-us-fps(限制 FPS)
data-us-lazyload="true"
data-us-production="true"
- 可选 JSON 源:
data-us-project-src="https://.../scene.json.txt"
事件(创作侧)
- Appear(入场)、Scroll(进度/速度)、Hover、Mousemove
- 用事件实现“有交互感”,无需写 JS。
常见坑
- 容器未定义尺寸 → 场景不显示
- 确保带
data-us-project 的元素有 width/height。
- 一页上场景过多 → WebGL 上下文限制 + 内存
- 优先每页 <10 个场景;WebGL 上下文上限约 16。
- 低端设备性能
- 使用
data-us-scale/data-us-dpi/data-us-fps;减少动态图层/特效。
- 站点搭建工具预览限制
- 许多搭建工具不会在编辑模式渲染;必须预览/发布才能看到。
快速食谱
1)基础嵌入容器
<div style="width: 100%; height: 420px" data-us-project="YOUR_PROJECT_ID"></div>
2)性能优先的嵌入
<div
style="width: 100%; height: 420px"
data-us-project="YOUR_PROJECT_ID"
data-us-lazyload="true"
data-us-production="true"
data-us-scale="0.75"
data-us-dpi="1.25"
data-us-fps="45"
></div>
需要向用户询问的
- 目标平台:Webflow / Framer / 手写代码站点?
- 场景在首屏吗?(影响脚本放置与 lazyload)
- 移动端支持要求 + 可接受的质量/FPS
- 页面上的场景数量,以及是否可用 JSON 导出