unicorn-studio

Unicorn Studio — 无代码 WebGL 场景（嵌入/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"

事件（编辑端）

• 出现（入场）、滚动（进度/速度）、悬停、鼠标移动
• 使用事件即可营造“交互感”，无需编写 JS。

常见问题

• 容器未定义尺寸 → 场景不会显示
  • 确保带有 data-us-project 的元素设置了宽度/高度。
• 单个页面上的场景过多 → 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 / 编码网站？
• 场景是否位于首屏？（影响脚本放置位置和延迟加载）
• 移动端支持要求，以及可接受的画质/FPS
• 页面上的场景数量，以及是否可用 JSON 导出