应用到Webflow

💡
Spline 在Webflow的本地集成目前是测试版功能。如果您有想法、功能请求或错误报告,请通过 help@spline.design(或在Spline底部反馈面板中)将反馈发送给我们。

当将交互式 3D 内容添加到您的网站时,您不需要撰写代码,只需要使用Webflow的集成,即Spline Embed(嵌入)即可完成。

您可以直接在 Webflow 中控制 Spline 场景的许多交互。这其中包括使用 Webflow 事件(例如:单击、悬停、鼠标位置、滚动)来操纵在Spline场景中对象的位置、旋转和缩放。

欲了解如何使用的更多信息,请按照本文档中的步骤和提示进行操作。

演示:如何将Spline场景导出并嵌入到 Webflow 中

在Spline中导出

  1. 打开Spline场景
  2. 点击顶部工具栏中的”导出“
  3. 选择Spline视图
  4. 复制顶部链接
  5. 链接示意:https://prod.spline.design/HqdfCmOueigtautT/scene.splinecode

    → 您可以随意使用上面的链接来测试

image

在Webflow中添加Spline的场景

目前Webflow暂无官方汉化版,故使用英文原版来进行说明

在Webflow编辑器中,按照以下步骤添加Spline场景:

  1. 点击左侧工具栏上的”+“图标
  2. 点击元素(Element),来到媒体(Media)部分,选择Spline场景(Spline Scene)
  3. 选中之后,将会由一个默认的Spline场景显示,你也可以在”URL“框中输入修改,粘贴你想要导入的Spline 场景的URL(请参阅上一步中从Spline导出)。
  4. 点击”显示所有设置“(Show All Settings),即可查看所有的Webflow设置。

如欲了解如何在Webflow上设置Spline场景的样式和大小的更多信息,请查看Webflow中的以下文档:

Webflow 中的样式面板概述 Webflow 中的元素设置面板

image
image

在Webflow中控制Spline的场景

⚠️
Webflow 中的Spline场景是 Beta 功能,本演示中仅展示了一个简单的示例,Webflow 的更多文档即将推出!
  1. 选择右侧边栏右上角的“⚡️ – 互动”。
  2. 创建一个新的触发器(元素触发器或页面触发器),在本练习演示中,选择”鼠标在视窗中移动“(Mouse move in viewport)以及”页面触发器“(Page trigger)旁边的“+”图标。
  3. 选择触发器。
  4. 添加动画(鼠标动画旁边的“+”图标)。
  5. 使用“⚙️ – 齿轮图标”(cogwheel icon)打开动画。
  6. “鼠标 X 操作”(Mouse X Action)中,单击“+”图标并在“集成”(Integrations)部分选择“Spline”→ 这将会解锁对Spline对象的访问。
  7. 在 0% 处选择“Spline”对象。
  8. 在侧边栏底部“对象”(object)旁边,从下拉列表中选择您想要操作的对象→“几何对象”(Geometry),例如在视频中的示例中的对象。
  9. 设置“几何对象”(Geometry)的初始位置、缩放和旋转,需要定义一个值才能生效(动画中会忽略默认值)
  10. 选择 100% 的Spline对象,您可以定义对象的位置、旋转和缩放的变换程度。
  11. 使用顶部工具栏中的“👁️ – 预览图标(preview icon)”预览体验。
  12. 完成!将鼠标移到网页上,就会展示为 Spline 对象设置的动画。
image

在Webflow中预览Spline场景

在 Webflow 中,以下方式可以预览Spline场景交互

  • 方式1 → 单击顶部工具栏中的“👁️ – 切换预览(Toggle Preview)”图标。
  • 方式 2 → 在 Webflow 中发布站点并加载页面以查看运行中的Spline场景。

在Webflow中更新Spline场景

1. 在Spline中

  • 在场景中对3D场景进行更改(比如更改对象的颜色)
  • 点击导出
  • 选择Spline视图格式
  • 点击底部按钮”更新“ → 等待更新完成

2.在Webflow中

💡
对于已发布的 Webflow 项目,只需重新加载包含 Spline Embed 的网站,即可看到最新的 Spline 更新。

如需要再Webflow编辑器中查看更新,请按照以下步骤操作:

  • 选择Spline场景。
  • 在右侧边栏中选择“元素设置”(Element Settings)
  • “Spline场景设置”(Spline Scene Setting)部分,单击“重新加载Spline场景”(Reload Spline Scene)
  • 完成,更新已上线!

最好的练习时刻

  • 场景优化 → 学习优化场景,确保场景在各种设备上快速加载并高效运行。 如何优化场景
  • 各种屏幕尺寸 → 要使场景与响应行为相匹配,请使用屏幕调整大小事件并将其与 Webflow 环境中的断点相匹配。 屏幕调整大小事件

👉下一步

应用到Framer

回到首页