Working with the 3D Sites Component

You're viewing help content for version:

AEM 3D includes an AEM Sites component that can be used 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.

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

The following instructions show one way to enable the 3D component:

Navigate to Tools > General > Templates.

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

Tap Edit to open the template.

In the top-right drop-down menu, select Structure mode, if not already active.

Tap in the Layout Container region to select it.

Tap on the Policy button to open the policy editor.

In the Properties section, select the 3D check mark and then tap Done to save the changes and close the policy editor.

The 3D Sites component can now be placed on all pages that use this template.

Caution:

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

To add an interactive 3D experience to any web page in AEM Sites:

Open AEM Sites and select the web page to which the 3D component is to be added.

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.

Tap the rail selector to open the side panel.

Tap on the plus sign to open the Components list.

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

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

Click the Configuration icon (wrench) to open the component configuration dialog.

The following component properties are available:

Property	Description
Height	Specify the desired height of the 3D component in pixels. If left empty, the default is 600 pixels.
Stage	Select a 3D Stage from the list of available stages. The stage provides background and lighting.
Auto-spin speed	The 3D viewer orbits the camera continuously after load and reset. Auto-spin terminates when the user initiates a manual orbit action. Specify the spin speed in RPM; set a positive value to spin right, a negative value to spin left, or 0 to disable auto-spin. Default is 3 rpm, equivalent to 20 seconds per full revolution. Note: The spin speed assumes a 60/sec frame rate, which is typically achieved with small to moderately-sized models on more powerful graphics hardware; larger models or slower devices will auto-spin at lower rates.
Controls main color	Use the color picker to choose the primary color for the viewer's control buttons.
Controls hover color	Use the color picker to choose the hover/selected color for the viewer's control buttons.

Tap the check mark to save your changes.

Note:

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

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

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

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

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

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

Follow these steps to preview the web page in the page editor with full access to the functionality of the 3D component:

Click on Preview near the top right of the page to enter preview mode.

Use the web browser's Reload button to reload the page in the browser to fully instantiate the 3D viewer.

Note:

The 3D component will only fully initialize in Preview mode after reloading the page in the browser.

Alternatively, remove /edit.html from the page url in the browser to preview the page without page editor scaffolding. When using this approach, no additional page refresh is needed.

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

Note:

Using the Publish Page menu item on the Page Information menu will publish the page and all primary 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 directly from AEM Assets, before publishing the web page that references these assets.

Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices | Online Privacy Policy

Working with the 3D Sites Component

Adding the 3D component to the page template

Adding the 3D viewer component to a web page

Configuring the 3D component

Assigning a 3D model to the component

Previewing a web page with the 3D component

Publishing the page and assets

Ask the Community

Contact Us