3D 模型查看器组件和 3D 编辑器

Google Ads、Google AdMob、AMPHTML 广告、视频广告和图片广告均不支持此组件。

借助 3D 模型查看器组件，您可以在广告中嵌入 GLB 格式的 3D 模型；用户可以对这种模型进行旋转、平移或缩放。此外，您还可以在 Google Web Designer 的 3D 编辑器中配置这种模型。

3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer

浏览器兼容性

Microsoft Edge 不支持 3D 模型查看器组件。

如需向项目中添加 3D 模型查看器组件，请执行以下操作：

1. 打开组件面板，然后打开图形和效果文件夹。
2. 将 3D 模型查看器组件拖动到场景中。
3. 在属性面板的 3D 模型查看器部分，输入您想要用作来源的 GLB 文件。点击浏览 按钮，从文件系统中选择一个文件。
4. 在场景中双击该组件，打开 3D 编辑器对话框并配置模型。完成后，点击保存。

您可以调整 Google Web Designer 偏好设置（依次选择修改 > 偏好设置… > 组件），以便将 GLB 文件拖动到场景中时，让系统自动创建 3D 模型查看器组件。

属性

您可以在“属性”面板中查看该组件的属性。（您必须退出 3D 编辑器。）

属性	说明
名称	3D 模型查看器组件的名称。
来源	3D 素材资源的 GLB 来源文件。素材资源文件不得超过 3 MB。 您可以参阅 3D 素材资源指南来了解其他指南，还可以使用 Khronos glTF Validator 来确保您的 GLB 文件有效。

高级属性

属性	说明
手势提示图标	显示在 3D 模型上的图片，用于提示用户与模型互动。手势提示会微微移动以吸引用户的注意力，直至达到动画时间限制，并会在用户开始与模型互动后消失。可以绑定到动态数据。
手势提示文字	显示在手势提示图标下方的文字。仅在指定了手势提示图标时才适用。可以绑定到动态数据。
设置动画时间限制	勾选此框并设置时长（以秒为单位），可以限制手势提示动画的时长。可以绑定到动态数据。

3D 编辑器

如需打开“3D 编辑器”对话框，请执行以下操作：

• 在场景中双击 3D 模型查看器组件。

您会看到 3D 模型的预览，并可以对 3D 模型进行旋转和缩放。您还可以与任何热点互动。

您可以使用右侧的面板来配置模型。相应配置放在了以下两个主要标签页中：GLB 和组件。

“GLB”标签页

在 GLB 标签页中所做的更改会保存到素材资源文件夹中的模型来源文件。所做更改包括选择用作纹理的所有图片文件，这些文件将打包到 GLB 文件中。您可以设置 Google Web Designer 的偏好设置，使系统自动删除未使用的纹理。

GLB 信息
来源	3D 模型的 GLB 来源文件。 这是一个只读字段。如需选择其他来源文件，请退出“3D 编辑器”对话框，然后在属性面板中修改组件的来源属性。
详情	大小 - 来源文件大小。
材质
材质	您一次只能配置一种材质。 已选择 - 该下拉列表中会列出 3D 模型中使用的所有材质。请选择您要查看或修改的材质。
基本色	要为当前材质使用的起始颜色和纹理。
金属度/粗糙度	金属度和粗糙度属性决定材质的反光程度。 纹理 - 选择纹理，以便指明材质的哪些部分有金属光感。 金属度 - 介于 0 到 1 之间的值，用于指明材质的金属度。材质的金属度越高，反射的环境光越多。 粗糙度 - 介于 0 到 1 之间的值，用于指明材质的哑光度，该属性会影响反射锐度。0 表示全反光，1 表示全哑光。
法线贴图	选择纹理，以便为材质添加凹凸效果和表面细节。
自发光	选择颜色和纹理，以便表示材质的光晕。
遮蔽	选择纹理，以便表示环境照明产生的阴影。
其他	设置材质的其他选项： 双面 - 选中此复选框可将材质设为双面。 Alpha 混合 - 选择应如何处理纹理的 Alpha 值（透明度）： 不透明 - Alpha 值会被忽略，并且纹理始终完全不透明。 混合 - 介于 0 到 1 之间的 Alpha 值表示纹理是半透明的。 遮罩 - 纹理的各个部分完全不透明或完全透明，具体取决于其 Alpha 值与指定的 Alpha 截止值的对比情况。Alpha 值高于截止值时，纹理不透明。

“组件”标签页

在组件标签页中所做的更改会反映在“3D 模型查看器”组件中，而不会反映在基础 GLB 来源文件中。

HDR 文件

高动态范围 (HDR) 图片文件可用于 3D 模型查看器组件中的背景和环境照明。每个 HDR 文件都必须小于 150KB。我们建议将大型 HDR 文件的大小调整为 256x128，以免超过此限制。

呈现方式
背景	图片 - 用于选择要用作背景的图片或环境（HDR 文件）。可以绑定到动态数据。
环境照明 (HDR)	您可以使用基于图片的照明来提供基于实际环境的细节照明。 图片 - 用于选择要使用的 HDR 格式全景图片。可以绑定到动态数据。 曝光 - 曝光程度。 阴影黑暗度 - 阴影的不透明度。 阴影柔和度 - 阴影的模糊度。
动画	如果 GLB 来源文件包含动画，您可以将动画设为自动播放。3D 编辑器目前不支持制作动画。 默认 - 选择一个现有动画作为默认动画。 自动播放 - 选中此复选框，即可在该组件加载后开始播放默认动画。 设置动画时间限制 - 选中此复选框，并输入您希望动画播放多少秒之后自动暂停。
相机
初始相机视图	初始相机视图决定该组件加载后的相机设置。系统将强制执行在以下字段中设置的任何相机旋转限制和相机缩放限制。 偏摆 - 相机绕垂直轴旋转的角度（以度为单位）。 倾角 - 相机绕水平轴旋转的角度（以度为单位）。 缩放 - 相机视图中模型的远近程度。 使用当前视图作为初始视图 - 如果您已在“3D 编辑器”对话框预览中调整相机视图，并且希望将当前相机视图用作初始相机视图，请点击此按钮。
环绕轴心点	环绕轴心点是相机旋转时所围绕的 3D 空间中的点。默认情况下，系统会将 3D 模型的中心设为环绕轴心点。 X - 环绕轴心点的 x 轴坐标位置。 Y - 环绕轴心点的 y 轴坐标位置。 Z - 环绕轴心点的 z 轴坐标位置。 重置 - 恢复为默认的环绕轴心点坐标。
视野范围	相机的垂直视野范围。 角度 - 介于 1° 到 179° 之间的角度。
相机旋转限制	如果您想限制用户可以将模型旋转的最大角度，请选中偏摆或倾斜复选框，并设置最小和最大角度。 偏摆（左右） - 相机可以绕垂直轴旋转的最大角度。 倾斜（上下） - 相机可以绕水平轴旋转的最大角度。
相机缩放限制	类型 - 选择您是否希望对用户使用缩放功能加以限制： 不限制相机距离 - 无限制。这是默认选项。 限制相机距离 - 设置距离的最小值和最大值。设置的缩放量最小值必须小于缩放量最大值。 固定相机距离 - 用户无法更改缩放量。必须将缩放量最小值和最大值设为相同的值。
热点
热点	热点是指 3D 模型上的特定点，用户可与这些点互动。您可以将点击热点后的反映设为显示信息卡片，或设置点击热点后触发的事件。 添加热点 - 创建新热点。方法是：选择此按钮，然后在 3D 模型上点击您想要设置热点的点。您可以通过下列字段对热点进行自定义。 名称 - 热点的名称。点击热点名称旁边的删除 图标，即可删除热点。 信息卡片 - 用于指定点击热点是否会调用信息卡片： 无 - 不调用任何信息卡片。 信息卡片 - 调出信息卡片。 标题 - 信息卡片上显示的标题。可以绑定到动态数据。 说明 - 信息卡片上显示的文字。可以绑定到动态数据。
图片	您可以通过指定不同状态对应的图片，来自定义热点的外观。所有热点均使用同一组图片。 鼠标未按下时的图片 - 用户未与热点互动时，热点使用的默认图片。 鼠标按下时的图片 - 用户点击热点时，热点使用的图片。 鼠标悬停其上时的图片 - 用户鼠标悬停在热点上时，热点使用的图片。 尺寸 - 热点的宽度和高度。
信息卡片样式	通过设置信息卡片的颜色，自定义其外观。 字体颜色 - 信息卡片标题和文字的颜色。 背景颜色 - 信息卡片背景的颜色。 边框颜色 - 信息卡片边框的颜色。

事件和操作

事件

可以使用事件在广告中触发其他操作。3D 模型查看器组件会发送以下事件：

事件	说明
呈现 3D 场景	在首次呈现 3D 模型场景后发送。
已更改相机	当任意 3D 相机属性发生更改时发送。如果用户调整了相机，event.detail 对象会包含 source: user-interaction 属性。
已点击热点	在用户点击了热点（在 3D 编辑器中设置）时发送。event.detail 对象会包含所点击热点的名称、该热点在场景的热点列表中的索引，以及该热点的 X 轴和 Y 轴屏幕坐标。
已开始互动	当用户开始与 3D 模型互动时发送。
已结束互动	当用户停止与 3D 模型互动时发送。

如需在“事件”对话框中选择上述某个事件，请将 3D 模型查看器组件设为目标。

操作

以下 3D 模型查看器组件操作可由其他事件触发：

事件	说明	配置选项
设置偏摆	将模型更改为指定的偏摆（绕垂直轴旋转的角度），并暂停静止动画。	偏摆 - 偏摆角度（以度为单位）。
设置目标偏摆	将模型平滑地旋转到指定的偏摆。	目标偏摆 - 偏摆角度（以度为单位），介于 -360 和 360 之间。
设置目标倾角	将模型平滑地旋转到指定的倾角（绕纵向轴旋转的角度）。	目标倾角 - 倾角（以度为单位）。
在目标倾角范围内增大倾角	将模型平滑地向目标倾角旋转指定的量。如果模型已达到目标倾角，则不会产生任何影响。	倾角增量 - 要将当前倾角增大的度数。
设置目标缩放量	平滑地缩放到指定的缩放量。	目标缩放量 - 缩放量（以米为单位）。
增大目标缩放量	增大目标缩放量（以米为单位）。	缩放量增量 - 使用负值可进行放大。
设置目标轴心	更改旋转轴心，并将相机平滑地移动到可绕该点环绕的位置。	目标轴心 x - x 坐标位置（以米为单位）。 目标轴心 y - y 坐标位置（以米为单位）。 目标轴心 z - z 坐标位置（以米为单位）。
设置目标本地平移量	将相机平滑地移动到新位置。	目标本地平移量 x - 以米为单位。 目标本地平移量 y - 以米为单位。
设置材质颜色	设置材质颜色。	材质名称 红色 - 新颜色的红色值（介于 0 和 1 之间）。 绿色 - 新颜色的绿色值（介于 0 和 1 之间）。 蓝色 - 新颜色的蓝色值（介于 0 和 1 之间）。
播放动画	播放指定的动画。	动画名称
暂停动画	暂停指定的动画。	动画名称
设置动画时间	在动画中跳至指定时间。	动画名称 动画时间 - 要跳转到的时间（以秒为单位）。

在“事件”对话框中选择上述某个操作时，请将 3D 模型查看器组件设为接收方。

高级 API 方法

您还可以使用自定义代码实现此目的。

getCameraDetails()

返回一个对象，其中包含与当前相机设置有关的详细信息。

所返回对象的属性：

• yaw - 绕垂直轴旋转的角度（以度为单位）。
• pitch - 绕水平轴旋转的角度（以度为单位）。
• zoom - 缩放量（以米为单位）。
• x - 相机环绕点的 x 轴坐标位置（以米为单位）。
• y - 相机环绕点的 y 轴坐标位置（以米为单位）。
• z - 相机环绕点的 z 轴坐标位置（以米为单位）。

高级用户还可以参阅 https://modelviewer.dev 中的文档。

预览

您只能通过以下两种方式预览 3D 模型查看器组件：一种是在 3D 编辑器中预览，另一种是点击右上角的预览按钮，在浏览器中预览。