Working with the 3D Sites component

AEM 3D includes an AEM Sites component that you can use to implement interactive viewing of 3D models on web pages.

After you have added your 3D component, you can view the 3D asset in that component.

Adding the 3D component to the page template

You must enable the 3D component in the page before you can place it on a page. See Editing templates for detailed information on enabling components in templates.

Adding the 3D component to the page template:

  1. Navigate to Tools > General > Templates.

  2. Navigate to the page template that you want to enable the 3D component in and select the template.

  3. Tap Edit to open the template.

  4. Near the upper-right of the page, in the drop-down menu, select Structure mode, if it is not already active.


  5. Tap in the Layout Container region to select it.

  6. Tap the Policy button to open the Policy Editor.

  7. In the Properties section, select the 3D checkmark, and then tap Done to save the changes and close the Policy Editor.

    You can now place the 3D Sites component on all pages that use this template.

Adding the 3D viewer component to a web page


This version of AEM 3D supports only one instance of the 3D component on each web page. Multiple 3D components on the same page do not function properly.

To add the 3D viewer component to a web page:

  1. Open AEM Sites and select the web page to which you want to add the 3D component.

  2. Tap the Edit (pencil) icon to open the page into the page editor. Make sure Edit mode near the top right of page is selected.


  3. Tap the rail selector to open the side panel.

  4. Tap the plus sign icon to open the Components list.

  5. Drag the 3D Viewer component from the Components list to the location on the page where you want the 3D viewer to appear.

Configuring the 3D component

  1. In the AEM Sites page editor, select the 3D Viewer component that you previously added to the page.

  2. Tap the Configuration icon (wrench) to open the component configuration dialog box.

    You can set the following component properties:

    Property Description Applicability
    Height (px) Specify the desired height of the 3D component in pixels. If left empty, the default is 600 pixels.
    Stage Name

    Select a 3D Stage from the list of available stages. The stage provides background and lighting.

    See About the use of stages in AEM 3D Sites.

    Ignored for Adobe Dimension assets.
    Auto-spin Speed (RPM)

    The 3D viewer orbits the camera continuously after load and reset. Auto-spin terminates when the user initiates a manual orbit action.

    You can specify the spin speed in RPM using the following values:

    • Set a positive value to spin right
    • Set a negative value to spin left
    • Set a 0 value to disable auto-spin.

    The default is 3 RPM, equivalent to 20 seconds per full revolution.

    Note: The spin speed assumes a 60/sec frame rate. This rate is typically achieved with small to moderately-sized models on more powerful graphics hardware. Larger models or slower devices auto-spin at lower rates.

    Ignored for Adobe Dimension assets.
    Navigation Button Color Use the color picker to choose the primary color for the viewer's control buttons. Ignored for Adobe Dimension asses.
    Navigation Hover Color Use the color picker to choose the hover/selected color for the viewer's control buttons. Ignored for Adobe Dimension assets.
    Show Swatches For future use. Ignored for Adobe Dimension assets.
    Show GLTF Camera Presets Show or hide the camera presets which may be present in Adobe Dimension assets. For Adobe Dimension assets only.
    GLTF Background Color Default background color if the 3D model does not include a background. For Adobe Dimension assets only.
  3. Tap the check mark to save your changes.

    In addition to the settings available in the component configuration dialog, a number of global configuration settings are available which can be modified by way of the CRXDE Lite.
    See Advanced Configuration Settings for detailed information on these global settings.

Assigning a 3D model to the component

  1. In the AEM Sites page editor, click the Assets icon to open the Assets list in the side panel.

  2. Select the 3D Models filter to hide unwanted asset types.


  3. Search for or scroll to the 3D asset that you want to view on the page being edited.

  4. Drag the 3D asset from the Assets list to the 3D Viewer component previously placed on the page.

    Adobe Dimension assets are rendered using new viewer technology based on the glTF open standard, while all other 3D asset types rely on the classic AEM 3D webGL viewer. The component automatically selects the appropriate viewer based on the type of the 3D model.

Previewing a web page that has a 3D component

While the web page is in Edit mode, the 3D component displays the 3D model but no interaction with the model is possible.

You can preview the web page in the page editor with full access to the functionality of the 3D component.

See also Viewing 3D assets in the Sites 3D component.

To preview a web page that has a 3D component:

  1. Do either one of the following:

    • Near the upper-right of the page, click Preview to enter preview mode.
    • Delete /edit.html from the page URL in the browser.

Publishing the page and assets

See Publishing Assets for information on how to publish assets. See Publishing Pages for information on how to publish pages.


Using the Publish Page menu item on the Page Information menu will publish the page and all primary page dependencies. Secondary dependencies that may be referenced by the 3D model and/or the 3D stage, such as texture maps and IBL images, are not published when you publish the page in this way.

Adobe recommends that you publish all 3D assets and their dependencies directly from AEM Assets, before publishing the web page that references these assets.

On this page