在Spline中,你可以导出代码场景,场景示意如下:
- Vanilla js
- 📄 Runtime Docs: https://www.npmjs.com/package/@splinetool/runtime
- Three.js
- 📄 Loader Docs: https://www.npmjs.com/package/@splinetool/loader
- React
- 📄 React Docs: https://github.com/splinetool/react-spline
- react-three-fiber
- 📄 r3f Docs: https://github.com/splinetool/r3f-spline
仅当导出到 Vanilla js 和 React 时才会启用动画和事件。
如何导出
- 当您完成您的设计作品,请点击顶部工具栏上的“
导出
”按钮。 - 从类型下拉中选择“代码”,然后从下拉列表中选择一种代码类型,然后等待生成 URL。
- 当url生成后,将出现一个 toast 通知,让您知道您的 URL 已准备好。
- 您可以复制代码,将其作为 CodeSandbox 项目打开,或下载本地文件以自行托管。
- 在播放设置下可以调整多个属性。
您可以下载代码导出并将其托管在您自己的服务器上。
关于 Web 内容导出 (Vanilla JS)
- 按照上述步骤,您可以通过在下拉列表中选择 Vanilla JS 作为代码类型来导出为 Web 内容。
- 您将在面板底部找到一个按钮,用于将内容下载为
.zip
文件。 - 如果你想玩体验,你需要运行一个本地服务器。 从未压缩的文件夹路径打开操作系统终端或控制台并运行:
python -m SimpleHTTPServer
从“Web 内容”选项保存的文件与用于“公共 URL”的文件相同。 这是将文件直接添加到您的 Web 项目的方法。
文件结构可能如下所示:
注意:index.html 中有一个 Canvas 元素,它运行 WebGL 3D 图形。
草稿
您可以使用草稿对您的导出进行版本控制。每个草稿都是您场景的快照。标有生产模式
的草稿是主 URL 指向的那个。
如果场景或导出设置有任何其他更改,请单击为代码生成草稿
或升级到生产
以反映最新更改。
有一个生产代码,可以在“草稿”选项卡下根据需要创建任意数量的草稿。任何草稿都可以升级为生产。
在Spline之外
除了Spline的事件之外,您可以在Spline之外处理事件,并使用他们来操作在Spline中建模的对象。
示例: