应用到Webflow

💡
您可以在导出前,通过选择否,来禁用例如旋转平移和缩放的交互

用可交互的3D场景来展示您的网站,且不用写任何的代码。

  1. 导出前,确保调整您的场景成为你希望它被加载时会看到的效果。您可以使用画框(全局设置右侧面板)或者画框指南去帮助你组织您的场景。
image

  1. 点击工具栏的导出,选择类型下拉列表中的公开网址并点击导出。
  2. 复制嵌入式链接。它长这个样子👇
<iframe src='https://my.spline.design/characterbunny-d30b2f8b151dc0f1a12829ea09489efc/' frameborder='0' width='100%' height='100%'></iframe>

  1. 打开Webflow, 点击左上角的 “+”按钮,来添加新的内嵌组件,只需要拖拽即可将内嵌组件添加到您的容器中。容器会是像一个div。
  2. 将嵌入式链接粘贴到Webflow出现的网页内嵌代码编辑器中,并保存。
  3. image

  1. 调整容器的尺寸,以便以你所需的尺寸来展示您的场景。
  2. 发布您的网页以便您实时的观看和演示它。

更新您的场景

  • 如果您在Spline中更新了您的场景,确保您在导出面板点击更新按钮,以更新您的内嵌链接。
  • Webflow 不会在网页编辑器中自动更新您的场景,确保您手动的编辑您的内嵌组件,删除内嵌代码并退出编辑模式,之后把新的代码添加进去。只有这样,您的场景才会在Webflow中更新。

👉下一步