导出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/

👉下一步

回到首页