如何将 Vectary WebAR 查看器嵌入到 Webflow

Vectary 网页端查看器可以帮你将 3D 和 AR 集成到你的 Webflow 网站中，浅嵌入 YouTube 视频一样简单。Webflow 是一款出色的在线工具，方便设计师和创意代理机构在无需编码的情况下创建网站。想知道 Vectary WebAR 查看器在 Webflow 网站上看起来有多棒吗？快来查看我们的 首页.

什么是 WebAR？

WebAR 是一种让访问者无需下载外部 App，即可直接从网页获得增强现实体验的技术。Vectary WebAR 查看器在 iPhone 和 Android 设备上都支持这一功能。

如何将你的 3D 设计嵌入到 Webflow 网站

1. 将你的 3D 模型导入 Vectary Studio，或者从零开始创建模型。
2. 旋转、平移或缩放 3D 模型并设置好视角。使用交互和动画。预览模式会展示它在 WebAR 查看器中的呈现效果。
3. 点击“分享”标签页并开启分享选项。
4. 复制嵌入代码。
5. 前往你的 Webflow 网页编辑器。点击 “+” 图标来添加一个 Embed 元素。你可以在 Components（组件）下找到它。将该 Embed 元素拖放到容器中。
6. 将你的 Vectary Viewer 代码粘贴 to Webflow 中的代码编辑器中。
7. 一旦发布网站，它就会直接出现在你粘贴代码的地方。

Webflow WebAR 查看器示例

你的查看器可以呈现为如下效果。

测试 WebAR iframe 代码

没有时间生成你的 WebAR 代码？在你的网站上测试这个 iframe：<iframe src="https://app.vectary.com/p/6JUjnpxVLsmPmDGW0tpVSQ" frameborder="0" width="100%" height="480"></iframe>

Vectary WebAR 查看器可以通过各种动画和行为进行自定义。你还可以使用查看器 API 制作自定义的交互式 Web 应用。想象一个电子商店，你的访客可以在同一个查看器中选择不同的颜色和形状组合。

如何更改你的 Vectary WebAR 查看器

假设你想修改 3D 模型的颜色、视角或整个形状。Vectary 编辑器的运作就像是你网页端查看器的即时 3D/AR CMS：

1. 在 Vectary 上打开你的 3D 项目
2. 进行修改
3. 点击“分享”标签页，并点击“同步更改”(Syncronize changes)——无需重新替换代码。3D 查看器会自动在你的所有网站上同步更新。

如何在 Vectary 中为你的查看器添加 AR 图标

1. 前往 Vectary Studio
2. 按 esc 键进入场景设置
3. 点击高级设置并选择 Augmented Reality。你可以自定义图标及其位置。

请注意：目前暂不支持 AR 中的交互。不过，AR 预览可以展示访客在 3D 查看器中配置的产品款式。