3D 网页嵌入完整指南及使用方法

Vectary 的最大特色之一就是网页 AR 嵌入。下面我们将详细介绍什么是 3D WebAR 嵌入，以及如何利用它来实现你的业务目标。

即使你不懂任何编程语言，“网页嵌入” 可能也还不在你的词汇表里，但这种情况即将改变。网页嵌入（或嵌入式文件）是指任何只需粘贴一段 HTML 代码或脚本，即可轻松插入到网站中的媒体类型。

无论你是想让博客文章更有趣，在网站中添加交互式元素，让客户在 AR 中体验产品，还是用热门社交媒体网络的设计元素来突出文章的某一部分，它都能为你的网站以及访问网站 of 客户带来巨大的价值。

如今，互联网用户每天都会接触到网页嵌入。它们以社交媒体帖子、新闻和媒体网站以及许多其他形式出现。YouTube 大概是大家最熟悉的嵌入内容之一。如果你想在博客文章中插入视频，通常只需复制并粘贴 YouTube 视频下方的一段代码即可。3D 项目也正在朝着这个方向发展。

一个 3D 和 AR 网页嵌入示例

下方图片是一个交互式 Vectary 3D 查看器 —— 它被称为 WebAR，因为它同时支持 3D 网页元素和增强现实体验。试着旋转它，或者点击 AR 图标在增强现实中查看它：

如何在 Vectary 中准备 WebAR 嵌入

步骤 1：创建 3D 对象或 3D 场景

要在博客或网站上嵌入对象，你需要规划好希望嵌入对象出现的位置。在此基础上，你可以对嵌入内容进行准备，使其自然地融入网站的环境中。有几种方法可以用来创建适合网页展示的 3D 项目。

导入你自己的 3D 模型

如果你已经有 3D 建模经验，你可能已经有了一些模型和文件来开始你的 3D 网页嵌入。只需将它们导入到 Vectary 中，然后等待其加载即可。目前，我们支持超过 60 种 file 格式，包括：.obj、.dae、.stl、.gltf、.glb、.jpg、.png、.svg，你可以 在这里查看所有支持格式的完整列表.

使用库访问 3D 资源库或预置合集

针对 3D 建模初学者，我们创建了一系列精选合集，其中包含资产、材质和环境。找到所需的素材后，只需将其拖放到场景中，然后继续生成嵌入代码即可。

从零开始创建项目

对于高级用户，Vectary 在编辑模式下提供了直观的网格建模功能。与导入项目类似，你可以从零开始创建，也可以编辑导入的现有项目，或者编辑从库中放入场景的项目。完成 3D 建模后，继续生成你的嵌入代码。

步骤 2：如何生成 3D 网页嵌入代码

一旦你准备好了项目和 3D 对象，创建 WebAR 嵌入代码就会变得非常简单直接。只需点击 “Share” 按钮并开启 “Share to web” 开关，我们的软件就会为你完成所有工作。完成后，系统将生成一段 iframe 代码，你可以直接在 HTML 代码中使用它。

Vectary 3D 网页嵌入设置

你可以在高级菜单中自定义嵌入效果：

纹理质量

影响嵌入效果的最重要参数是纹理质量。细节更丰富的纹理由于非常精致，需要更多时间来生成。在网站上应用时，它们的运行性能也可能会较慢。另一方面，较低分辨率的纹理加载速度更快。你可以单独降低材质中使用的每张纹理的质量。

增强现实

在 Vectary Studio 的项目属性面板中，从高级菜单添加 “增强现实”。不同平台（Android、iOS）所需的文件 会自动 在后台生成。

居中相机视图

要 将相机居中对准 你的主对象，首先请确保你已进入该相机（由相机名称旁的 “+” 图标指示）。然后点击该对象（或对象组），并点击底部工具栏中的 “自适应视图” 图标（快捷键为 “a”）。这将把相机的中心点对准你选中的对象（如果未选择任何对象，它将把相机居中对准场景中心）。通过滚动进行放大/缩小，通过平移和旋转来调整你的视角。

限制相机视角

从工具栏向场景中添加相机。由于项目中可以有多个相机，你需要 “进入” 相机才能在分享的项目中实际使用相机设置。选择你的相机并在右侧属性面板中修改设置。开启 “View Limits” 开关以 限制视角、平移和缩放。点击 “Preview” 来体验你的新设置。要 将相机居中对准 你的主对象，首先请确保你已进入该相机（由相机名称旁的 “+” 图标指示）。然后点击该对象（或对象组），并点击底部工具栏中的 “自适应视图” 图标（快捷键为 “a”）。这将把相机的中心点对准你选中的对象（如果未选择任何对象，它将把相机居中对准场景中心）。通过滚动进行放大/缩小，通过平移和旋转来调整你的视角。

效果（仅限网页端）

如果你开启了地面（Ground plane）或能投射阴影的光源，你可能想要从效果列表中添加 “Soft Shadows”。另一个能为你的 3D 对象提供阴影/深度的类似效果是 “Ambient Occlusion”，它与 “Reflections” 一样是实时计算的。

步骤 3：预览 WebAR 嵌入

有时，在嵌入之前预览你的 WebAR 查看器是个不错的选择，或者你只是想与同事和客户分享增强现实预览。前往 “Share” 并点击 “Share to web”，复制直接链接并在新标签页中打开。

步骤 4：将网页嵌入代码放入你的网站代码中

只需从 “Share” 部分复制网页嵌入代码并将其粘贴到你的网站中即可。其原理与 YouTube 嵌入代码相同。你也可以在诸如 Squarespace, Wix, Shopify, Weebly 等类似平台上进行嵌入。

如何编辑 3D 网页嵌入代码

熟悉 HTML 代码的用户可以编辑生成的 iframe 代码。目前，只能更改宽度、高度和边框等基本参数。未来，嵌入代码中将提供更多自定义和可编辑选项。无需任何编程技能即可使用。例如，如果你想调整大小并缩小嵌入内容以契合你的网站，只需根据需要更改 “width” 和 “height” 属性。我们建议将 framerborder 的值设为 “0”，以使对象与背景完美融合。

步骤 4：如何编辑网站上的 3D 查看器

网站上的嵌入对象是在 Vectary 编辑器中创建的 3D 设计的最终结果。然而，Vectary 更进一步，允许你编辑已嵌入的 WebAR 项目并实时进行更改。在 Vectary 中打开项目，进行修改，并在 “Share to web” 设置旁刷新。所有更改都将立即生效。

常见问题

使用 Vectary 3D 网页嵌入需要多少费用？

WebAR 测试现在是 PRO 计划的一部分，且浏览次数有限。请查看我们的 价格 以了解更多信息。