使用3D Sites组件

AEM 3D包含一个AEM Sites组件,您可以使用它在网页上实现3D模型的交互式查看。

添加3D组件后,您可以视图该组件中的3D资产。

将3D组件添加到页面模板

必须先在页面中启用3D组件,然后才能将其放置到页面中。 有关在模板中启用组件的详细信息,请参阅编辑模板

将3D组件添加到页面模板:

  1. 导航到​工具>常规>模板

  2. 导览至要在中启用3D组件的页面模板,然后选择该模板。

  3. 点按​编辑​以打开模板。

  4. 在页面右上角附近的下拉菜单中,选择​结构​模式(如果它尚未处于活动状态)。

    image2017-11-14_15-33-57

  5. 点按​布局容器​区域以选择它。

  6. 点按​策略​按钮以打开​策略编辑器

  7. 在​属性​部分,选择​3D​复选标记,然后点按​完成​以保存更改并关闭​策略编辑器

    您现在可以将3D站点组件放置到使用此模板的所有页面上。

将3D查看器组件添加到网页

注意

此版本的AEM 3D仅支持每个网页上3D组件的一个实例。 同一页面上的多个3D组件无法正常工作。

要将3D查看器组件添加到网页,请执行以下操作:

  1. 打开AEM Sites,然后选择要向其添加3D组件的网页。

  2. 点按​编辑(铅笔)图标以在页面编辑器中打开页面。 确保在页面右上方附近选择了​编辑​模式。

    image2017-11-14_15-44-40

  3. 点按边栏选择器以打开侧面板。

  4. 点按加号图标以打开​组件​列表。

  5. 将​3D查看器​组件从​组件​列表拖动到页面上希望显示3D查看器的位置。

配置3D组件

  1. 在AEM Sites页面编辑器中,选择您之前添加到页面的​3D查看器​组件。

  2. 点按​配置​图标(扳手)以打开组件配置对话框。

    您可以设置以下组件属性:

    属性 描述 适用性
    高度(像素) 以像素为单位指定3D组件所需的高度。 如果留空,则默认为600像素。
    舞台名称

    从可用舞台的列表中选择3D舞台。 舞台提供背景和灯光。

    请参阅关于在AEM 3D Sites中使用舞台

    已忽略Adobe Dimension资源。
    自动旋转速度(RPM)

    3D查看器在加载和重置后连续环绕相机运行。 当用户启动手动绕行操作时,自动旋转终止。

    可以使用以下值以RPM格式指定旋转速度:

    • 将正值设置为向右旋转
    • 将负值设置为向左旋转
    • 设置0值以禁用自动旋转。

    默认为3 RPM,相当于每完整旋转20秒。

    注意: 旋转速度采用60/秒帧速率。通常,在功能更强大的图形硬件上,使用小型到中型的机型即可实现此速度。 较大型号或较慢设备以较低的速率自动旋转。

    已忽略Adobe Dimension资源。
    导航按钮颜色 使用拾色器为查看器的控制按钮选择主颜色。 已忽略Adobe Dimension。
    导航悬停颜色 使用拾色器为查看器的控制按钮选择悬停/选定颜色。 已忽略Adobe Dimension资源。
    显示色板 供将来使用。 已忽略Adobe Dimension资源。
    显示GLTF相机预设 显示或隐藏Adobe Dimension资产中可能存在的相机预设。 仅限Adobe Dimension资源。
    GLTF背景颜色 如果3D模型不包括背景,则默认背景颜色。 仅限Adobe Dimension资源。
  3. 点按复选标记以保存更改。

    除了组件配置对话框中的可用设置之外,还有许多全局配置设置可用,可以通过CRXDE Lite进行修改。
    有关这些全局设置的详细信息,请参见高级配置设置

将3D模型分配给组件

  1. 在AEM Sites页面编辑器中,单击​资产​图标以打开侧面板中的资产列表。

  2. 选择​3D模型​过滤器以隐藏不需要的资产类型。

    screen_shot_2017-12-11at124258

  3. 搜索或滚动到要在所编辑的页面上视图的3D资产。

  4. 将3D资产从​Assets​列表拖动到之前放在页面上的​3D Viewer​组件。

    Adobe Dimension资产是使用基于glTF open standard的新查看器技术渲染的,而所有其他3D资产类型都依赖经典的AEM 3D webGL查看器。 组件会根据3D模型的类型自动选择适当的查看器。

预览包含3D组件的网页

当网页处于​编辑​模式时,3D组件显示3D模型,但不能与模型交互。

您可以在页面编辑器中预览网页,并完全访问3D组件的功能。

另请参阅查看站点3D组件中的3D资产

要预览包含3D组件的网页,请执行以下操作:

  1. 执行以下操作之一:

    • 在页面的右上角附近,单击​预览​进入预览模式。
    • 从浏览器中的页面URL中删除/edit.html

发布页面和资产

有关如何发布资产的信息,请参阅发布资产。 有关如何发布页面的信息,请参阅发布页面

注意

使用​页面信息​菜单上的​发布页面​菜单项将发布页面和所有主页面依赖项。 以这种方式发布页面时,可能由3D模型和/或3D舞台引用的辅助依赖项(如纹理映射和IBL图像)不会发布。

Adobe建议您在发布引用这些资产的网页之前,直接从AEM Assets发布所有3D资产及其依赖关系。

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now