用途:面向希望在不手写着色器或 three.js 的情况下,将设计好的 WebGL 视觉效果与文字、图片、视频分层叠加并带有交互性的网页场景,常见于 Framer、Webflow、Wix、Figma Sites 等建站工具。
主要能力:Unicorn Studio 是带图层、效果与事件的场景编辑器,可导出为通过 Unicorn Studio SDK(小型 JS 库)嵌入,或按套餐导出 JSON/代码以便更快加载或自托管。编写侧事件包括 Appear(入场)、Scroll(进度/速度)、Hover、Mousemove,无需写 JS 即可获得交互感。
使用方式:加载 SDK(可按是否首屏决定放 head 或页脚,使用 jsDelivr 的 UMD 版本),DOM 就绪后调用一次 UnicornStudio.init(),并在容器元素上添加属性:data-us-project="PROJECT_ID";可选性能/行为参数包括 data-us-scale(渲染缩放)、data-us-dpi(分辨率倍数)、data-us-fps(帧率上限)、data-us-lazyload="true"、data-us-production="true";也可用 data-us-project-src="https://.../scene.json.txt" 指定 JSON 来源。容器需定义宽高,例如 width: 100%; height: 420px。
限制与注意:容器无尺寸则场景不显示;单页场景过多会触及 WebGL 上下文上限(约 16 个)与内存问题,建议少于 10 个;低端设备可用上述参数并减少动态图层与效果;许多建站工具在编辑模式下不渲染,需预览或发布后查看。具体套餐差异、可用平台与导出方式等细节以官方为准,资料未提供的不作说明。