Working with 3D assets in Dynamic Media

Dynamic Media lets you upload, manage, view, and deliver 3D assets as immersive experiences.

  • One-click publishing (using Quick Publish on the toolbar) of 3D assets to generate a URL.
  • Optimized support for viewing 3D assets with the high-quality, interactive Dimensional viewer preset powered by Adobe Dimension.
  • The 3D Media WCM component lets you easily add 3D assets to your AEM Sites pages.

There is no additional configuration required to use 3D assets in Dynamic Media.

shoe in 3d

3D formats supported in Dynamic Media

Dynamic Media supports the following 3D formats.

See also 3D formats supported.

3D file extension File format MIME type Notes
GLB Binary GL Transmission model/gltf-binary Includes the materials and textures as a single asset.
OBJ WaveFront 3D Object File application/x-tgif
STL Stereolithography application/vnd.ms-pki.stl
USDZ Universal Scene Description Zip archive model/vnd.usdz+zip Support for ingestion only; no viewing or interaction is available. USDZ is a proprietary 3D format that can be viewed natively by Safari and iOS devices.

Quick Start: 3D assets in Dynamic Media

The following step-by-step workflow description is designed to help you get up and running quickly with 3D assets in Dynamic Media - Scene7 mode.

NOTE

3D assets are not supported in Dynamic Media - Hybrid mode.

Before you work with 3D assets in Dynamic Media, make sure that your AEM administrator has already enabled and configured Dynamic Media Cloud Services in Dynamic Media - Scene7 mode.

See Configuring Dynamic Media Cloud Services in Configuring Dynamic Media - Scene7 mode and Troubleshooting Dynamic Media - Scene7 mode.

  1. Upload 3D assets

  2. Manage 3D assets

  3. Publish 3D assets

About viewing and interacting with 3D assets

This section describes how to view and interact with 3D assets two different ways: from within the asset details page and from within the 3D Media component in Sites.

The interactive 3D viewer includes, among other things, a collection of interactive camera controls that let you orbit, zoom, and pan the 3D asset.

Be aware that the time it takes to open a 3D asset in the Asset Details page view depends on several factors. These factors include such things as the following:

  • Bandwidth to the server.
  • Latencies to the server
  • Complexity of the image.

In addition, the capabilities of the client computer-such as a workstation, notebook, or mobile touch device-are also important to consider when you manipulate the camera interactively. A reasonably powerful system with good graphics capabilities can make the interactive 3D viewing experience smoother and more favorable.

TIP

You can open the Dimensional viewer preset in the Viewer Preset Editor to practice navigating a 3D asset without the need to first upload any 3D files. The Dimensional viewer preset has a built-in 3D asset for you to interact with.

See Managing viewer presets.

Viewing and interacting with a 3D asset from the asset details page

See also Previewing assets using the software interface.

To view and interact with a 3D asset from the asset details page

  1. Make sure you have uploaded 3D assets into AEM.

    See Uploading your 3D assets for use in Dynamic Media.

  2. From AEM, on the Navigation page, tap Assets > Files.

  3. Near the upper-right corner of the page, from the View drop-down list, tap Card View.

  4. Navigate to a 3D asset that you want to view.

  5. Tap the card of the 3D asset to open it in the asset details page.

  6. On the details view page for the 3D asset, do any of the following:

    • Turn your camera – Orbit your view around the 3D scene and objects.
      • Mouse: Left click + drag.
      • Touch screen: Single-finger press + drag.
    • Pan your camera – Pan your view left, right, up, or down.
      • Mouse: Right click + drag.
      • Touch screen: Two-finger press + drag.
    • Zoom your camera – Zoom your camera to move in and out of areas of the 3D scene.
      • Mouse: Scroll wheel.
      • Touch screen: Two-finger pinch.
    • Recenter your camera – Recenter your camera to a point on a object in the 3D scene.
      • Mouse: Double-click.
      • Touch screen: Double-tap.
    • Reset – Near the lower-right corner of the page, tap the Reset icon to restore the view target point to the center of the 3D asset. Reset also moves the camera closer or further away to show the asset in its entirety and at a reasonable viewing size.
    • Full screen mode – To enter full screen mode, in the lower-right corner of the page, tap the Fullscreen icon.
  7. In the upper-right corner of the page, tap Close to return to the Assets page.

Viewing and interacting with a 3D asset inside a 3D Media component

When a web page is in Edit mode, no interaction is possible with a 3D asset. To make the asset interactive, you can use the Preview feature to view the web page in the page editor with full access to the functionality of the 3D Media component.

IMPORTANT

You can accomplish this task only after you have added a 3D Media component to a web page and assigned a 3D asset to the component. See Adding the 3D Media component to a web page and Assigning a 3D asset to a 3D Media component.

See also Previewing assets using the software interface.

To view and interact with a 3D asset inside a 3D Media component

  1. While a web page is in Edit mode, do either one of the following:

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

    3D asset showing inside the 3D Media component
    A fully interactive 3D asset as displayed in Preview mode.

  2. While in Preview mode, do any of the following:

    • Turn your camera – Orbit your view around the 3D scene and objects.
      • Mouse: Left click + drag.
      • Touch screen: Single-finger press + drag.
    • Pan your camera – Pan your view left, right, up, or down.
      • Mouse: Right click + drag.
      • Touch screen: Two-finger press + drag.
    • Zoom your camera – Zoom your camera to move in and out of areas of the 3D scene.
      • Mouse: Scroll wheel.
      • Touch screen: Two-finger pinch.
    • Recenter your camera – Recenter your camera to a point on a object in the 3D scene.
      • Mouse: Double-click.
      • Touch screen: Double-tap.
    • Reset – Near the lower-right corner of the page, tap the Reset icon to restore the view target point to the center of the 3D asset. Reset also moves the camera closer or further away to show the asset in its entirety and at a reasonable viewing size.
    • Full screen mode – To enter full screen mode, in the lower-right corner of the page, tap the Fullscreen icon.

About working with the 3D Media component

Dynamic Media includes a Dynamic Media 3D Media component that you can use in AEM Sites to enable interactive viewing of 3D models on your web pages.

Adding the 3D Media 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.

    3d-media-component-structure

  5. Tap an empty area in the Layout Container region to select it and open its associated toolbar.

  6. On the toolbar, tap the Policy icon to open the Policy Editor.

  7. In the Properties section, under the Allowed Components tab, scroll to Dynamic Media, then expand the list and check 3D Media.

  8. Tap Done to save the changes and close the Policy Editor.

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

Adding the 3D Media component to a web page

If you are using Adobe Experience Manager as your web content management system you can add 3D assets to your web pages by way of the 3D Media component.

See also Adding Dynamic Media assets to pages.

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

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

    3d-media-component-add

  3. On the toolbar, tap the Side Panel icon to toggle or “turn on” the display of the panel.

  4. In the side panel, tap the plus sign icon to open the Components list.

    3d-media-component-drag-drop

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

You are now ready to assign a 3D asset to the component.

See Assigning a 3D asset to the a 3D Media component.

Optional – Configuring the 3D Media component

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

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

    3d-media-component-config

  3. In the 3D Media dialog box, from the Viewer Preset drop-down list, select Dimensional to assign the Dimensional viewer preset to the component.

    3d-media-component-edit-config

  4. In the upper-right corner, tap the check mark to save your changes.

Assigning a 3D asset to the 3D Media component

After you have added a 3D Media component to a web page, you can assign a 3D asset to it.

See Adding the 3D Media component to a web page.

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

  2. In the drop-down list, select 3D to show only 3D asset file types.

  3. In the side panel, 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 side panel and drop it onto the 3D Media component that you previously added to the page.

    Assign 3d asset to 3d Media component

NOTE

While a web page is in the AEM Sites Edit mode, the 3D Media component displays the 3D asset but no interaction with the asset is possible. To make the asset interactive, you can use the Preview feature to view the web page in the page editor with full access to the functionality of the 3D Media component.

Publishing static Dynamic Media 3D assets

Dynamic Media accepts a variety of 3D file formats that are supported as static content in Dynamic Media. Static content means that you can upload and published 3D assets, but there is no support for dynamic imaging or image refitting that is associated with the 3D asset. The reason is because Dynamic Media Imaging Server does not recognize 3D formats. As such, after you publish a 3D asset in Dynamic Media, you have an instant URL that you can copy. The URL for the 3D asset follows the usual Dynamic Media URL structure. However, you cannot edit any parameters in the asset’s URL, unlike traditional image assets in Dynamic Media.

See also Obtaining a URL for a static asset.

In the Card View, a small globe icon appears directly below an asset’s name and to the left of its date and time to indicate that it is published. In the List View, a Published column indicates which assets are published or which are not.

If you are using AEM as your WCM, use this publishing method to add the Dynamic Media 3D assets directly on your web page.

See also Publishing Dynamic Media assets.

See also Publishing Pages.

To publish static Dynamic Media 3D assets

  1. Open a 3D asset (GLB, OBJ, or STL file format) to view it in the asset details page.

  2. On the toolbar, tap Quick Publish.

    3d-asset-quick-publish

  3. Tap Close to exit the dialog box and return to the asset details page.

  4. From the drop-down list to the left of the 3D asset’s file name, tap Renditions.

    3d-asset-renditions

  5. Tap original. When a 3D asset is published (or “activated”) the URL button appears near the bottom-left corner of the page if all of the following 3D asset conditions are met:

    • The 3D asset is a supported format (GLB, OBJ, STL, and USDZ).
    • The 3D asset was ingested into the Dynamic Media Image Production System (IPS).
    • The 3D asset is published.

    3d-asset-url

  6. Tap URL to display the 3D asset’s direct production URL which you can copy and use on web pages.

Alternate methods for publishing Dynamic Media 3D assets using the Dimensional viewer

Use the following two methods for publishing Dynamic Media 3D assets if you are not using AEM as your WCM.

On this page