导出Spline 视图

Spline视图是将Spline场景嵌入网站的更灵活的方式。

<spline-viewer> 是原生 HTML Web 组件,可与大多数 Web 构建器、框架或浏览器一起使用。

演示

对于交互式演示,请查看

URL 和Spline视图之间的差异

导出的URL可以使用 iFrame 嵌入,而Spline视图是本地 HTML 组件,可以实现更大的灵活性。

Spline 视图 能够捕获画布外部发生的交互,从而使 3D 内容能够更好地与其嵌入的网页连接(例如:基于整个网页上的鼠标位置或基于网页的滚动状态)。

全球事件 VS 本地事件

  • 全局事件是在整个浏览器窗口中发生的事件。
  • 本地事件仅发生在画布(或 iFrame)内。
功能
URL
Spline 视图
无需 iFrame 即可工作*
不支持
支持
面向事件-全局/本地
仅本地
两者
面向事件-全局/本地
仅本地
两者
滚动事件-全局/本地
仅本地
两者
📝 注意:iFrame 是一种 HTML 元素,通常用于在网页上嵌入内容。 iFrame 仅捕获(本地)内发生
的情况。

如何使用样条线查看器导出和嵌入

  1. 设置场景后,按工具栏上的 导出 按钮,打开导出面板。
  2. 从左侧的选项中选择“Spline视图”。
  3. 当您的 URL 准备就绪时,将会出现一条 Toast 通知,让您知道你的URL已经成功导出。
  4. 您现在可以复制嵌入(代码片段)并将其粘贴到您的 Web 构建器中。
  5. 可以在“播放设置”下调整多个属性

👉 在此处查看演示场景: https://viewer-embed.framer.website/

Spline视图选项

Logo

如果设置为“是”,Spline的logo将出现在您的嵌入件上。 如果设置为否,样条线徽标将从您的所有嵌入中删除。

提示

提示是在未检测到与场景交互时出现的图像,让用户知道可以与 3D 内容交互。

加载中

通过加载,您可以决定是否希望在场景加载时出现旋转加载程序。

延迟加载

默认情况下,样条线查看器使用称为延迟加载的过程,仅当画布在屏幕上可见时才加载画布内容。

您可以通过使用 loading =“eager” 来禁用延迟加载

鼠标事件

全球(全窗口)

全局选项意味着鼠标事件将在网页的整个窗口上起作用。

本地(画布容器)

本地选项意味着鼠标事件仅在 <spline-viewer> HTML 组件的容器内起作用。

集成

由于 <spline-viewer> 是原生 HTML 组件,因此可以将其与任何框架、网站构建器或浏览器集成!

以下是一些已知的选项:

  • Framer
  • Webflow
  • Squarespace
  • Typedream
  • React
  • JS
  • Svelte
  • + more…

事件的主要区别

所有事件在查看器嵌入中的行为与其他嵌入正常工作一样,但是您可以利用滚动事件、关注事件和查看事件的一些附加功能。 请参阅下面的更多详细信息。

滚动事件

Scroll 事件有一个名为 Scroll 的类型,它仅适用于”Spline视图“导出。

这种类型允许您根据网页的滚动在状态之间进行转换(在操作部分中设置)。

👉 在此处查看演示场景: https://viewer-scroll-event.framer.website/

开始于 - 进入视图

一旦视图组件出现在网页上,具有滚动事件的对象将开始动画。

始于

  • 顶部 → 一旦组件顶部进入视图,动画就会开始。
  • 中间 → 一旦组件的中间进入视图,动画就会开始。
  • 底部 → 一旦组件的底部进入视图,动画就会开始。

偏移

对于每个“开始于”选项,您仍然可以向该选项添加偏移量,以便稍后开始。

截至

定义过渡操作达到最终状态时从设置的“开始位置”(以像素为单位测量)开始的滚动量。

image

开始于 - 页面

具有滚动事件的对象将在网页定义的“起始位置”位置开始动画,这意味着从网页顶部开始的高度(以像素为单位)。

开始于

网页上滚动事件应开始动画显示的位置。

截至

定义过渡操作达到最终状态时的滚动量(从网页顶部以像素为单位测量)。

image

跟随事件

通过 跟随 事件,您现在可以控制该事件是否起作用:

  • 全局(鼠标/触摸事件将在网页的整个窗口上起作用)。
  • 本地(鼠标/触摸事件仅在 <视图> HTML 组件的容器内起作用)。

👉 在此处查看演示场景: https://viewer-follow-event.framer.website/

面向事件

  • 全局(鼠标/触摸事件将在网页的整个窗口上起作用)。
  • 本地(鼠标/触摸事件仅在 <视图>HTML 组件的容器内起作用)。

👉 在此处查看演示场景: https://viewer-lookat-event.framer.website/

👉下一步

回到首页