Class s7sdk.image.DimensionalView

The DimensionalView is a viewing component for displaying glTF/GLB, OBJ and STL files in the browser served by Adobe Image Serving.

The user can navigate through the 3D scene using mouse on desktop systems or with touch gestures on mobile devices and tablets. The component allows to rotate the camera, pan around or zoom using the following gestures:

to rotate the camera in 3D space around the 3D scene and objects use left mouse click and drag (or press and drag on touch devices);
to pan the camera around use right mouse click and drag or control and mosue drag (or two-finger press and drag on touch devices);
to zoom into the 3D scene use mouse scroll wheel (or pinch-zoom on touch devices);
to re-center the camera use double click (or double tap on touch devices).

The component is initialized by calling setItem() method and passing an instance of the StaticContentDesc to it produced by the MediaSet component.

Customizing Behavior Using Modifiers

Modifiers change DimensionalView default behavior. They are passed to the component by the ParameterManager instance specified in the constructor.

The following modifiers are supported:

Modifier	Syntax	Description	Default
contenturl	contentRootPath	The content root path. If no domain is specified, the domain from which the page is served is applied instead. Standard URI path resolution applies.	/is/content/
chromeless	0\|1	Controls visisbility of the camera thumbnails and helper UI. When set to `1` the component hides camera thumbnails and all the UI buttons, and only the model is rendered on the screen, otherwise the UI is visible.	0
cameraTitles	0\|1	Controls visibility of camera thumbnail titles. When set to `1` the title text will show below camera thumbnails, otherwise it is hidden.	1

Localized Symbols

DimensionalView also has text symbols that you can localize either in a preset or in the viewer page though the mechanisms provided by the ParameterManager. For more information on localization consult the ParameterManager API documentation and Adobe Experience Viewers HTML5 SDK User Guide.

Symbol	Description
`DimensionalView.FULLSCREEN_TOOLTIP`	Define a localized tooltip for "fullscreen" button of `DimensionalView`
`DimensionalView.HELP_TOOLTIP`	Define a localized tooltip for "help" button of `DimensionalView`
`DimensionalView.VR_TOOLTIP`	Define a localized tooltip for "vr" button of `DimensionalView`
`DimensionalView.RESET_TOOLTIP`	Define a localized tooltip for "reset" button of `DimensionalView`
`DimensionalView.HELP_CONTROLS_TITLE`	Define a localized title Help controls of `DimensionalView`
`DimensionalView.HELP_CONTROLS_OR`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_PAN_TITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_PAN_SUBTITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_PAN_DESCRIPTION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ORBIT_TITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ORBIT_SUBTITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ORBIT_DESCRIPTION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ZOOM_TITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ZOOM_SUBTITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_ZOOM_DESCRIPTION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_FOCUS_TITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_FOCUS_SUBTITLE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.HELP_CONTROLS_FOCUS_DESCRIPTION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.MADE_WITH_ADOBE_DIMENSION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.VIEWER_VERSION`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.SOMETHING_WENT_WRONG`	Define a localized error message from embed.ejs of `DimensionalView`
`DimensionalView.LEARN_MORE`	Define a localized part of the help template of `DimensionalView`
`DimensionalView.ERROR_LOADING_MODEL`	Define a localized message shown when the model cannot be loaded in`DimensionalView`
`DimensionalView.DIMENSION_LANDING_PAGE`	Define a localized "aria-roledescription" of `DimensionalView`
`DimensionalView.DIMENSION_PUBLISH_HELP`	Define a localized "aria-roledescription" of `DimensionalView`
`DimensionalView.ROLE_DESCRIPTION`	Define a localized "aria-roledescription" of `DimensionalView`

Defining the Appearance using CSS

You can define the appearance of the DimensionalView component using CSS rules. All Adobe Experience Viewers HTML5 SDK components use class selectors for styling. You can define the appearance of the DimensionalView component using the .s7dimensionalview class selector. The styles associated with this class selector are applied to all instances of the DimensionalView component. You can style particular instances by prefixing the class rule with the instance #id. For example, styling rules for #myComp.s7dimensionalview are applied only to the particular DimensionalView instance.

CSS Class	Attribute Selector	Description
`.s7dimensionalview`	(None)	Represents the main body of the `DimensionalView` component.

Class Summary
Constructor Attributes	Constructor Name and Description
	s7sdk.image.DimensionalView(container, settings, compId)

Method Summary
Method Attributes	Method Name and Description
	addEventListener(type, handler, useCapture) Adds an event listener to the instance of the `DimensionalView` component.
	dispose() Dispose is used to remove itself and all sub-elements from the DOM
	getHeight() Returns the current inner height of the component.
	getWidth() Returns the current inner width of the component.
	resize(width, height) Sets the DimensionalView to the specified width and height.
	setCSS(classname, property, value) Sets a particular CSS class and property on a component
	setItem(item) Sets the current item displayed by the component.
	setModifier(modObj) Sets 1-N # of modifiers for the component.

Class Detail

s7sdk.image.DimensionalView(container, settings, compId)

Example Code
This example demonstrates how to use the DimensionalView component in a simple viewer. In this example a Container object
is created.

The code below does the following:

The Adobe Experience Viewers HTML5 SDK is linked to the page and the required s7sdk components are included in the document head.
CSS Styles are defined in the document head to control the appearance of the DimensionalView and button components.
The s7sdk.Util.init() method is called to initialize the SDK.
A ParameterManager object is created to handle component modifiers for the viewer.
An initViewer() function is defined. This function initializes a couple of modifiers (hard coded for example purposes),
then creates the component objects required for this simple example. The initViewer() function also adds event listeners
that designate functions to handle relevant component events (which might be dispatched by the components as a result of
changes in a component's state, etc.).
Handler functions are defined to respond to the component event listeners added in the initViewer() function.
An event listener is added to the ParameterManager object that designates the initViewer() function as the handler
to call when the Adobe Experience Viewers HTML5 SDK is loaded and ready.
Finally, the init() method is called on the ParameterManager object to start the viewer.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width" />

        <title>DimensionalView Component</title>

        <script language="javascript" type="text/javascript" src="../js/s7sdk/utils/Utils.js"></script>
        <script language="javascript" type="text/javascript">
            s7sdk.Util.lib.include('s7sdk.image.DimensionalView');
            s7sdk.Util.lib.include('s7sdk.common.Container');
            s7sdk.Util.lib.include('s7sdk.set.MediaSet');
        </script>
        <style type="text/css" media="screen">
            html,body {
                width: 100%;
                height: 100%;
            }
            body {
                margin: 0px;
                padding: 0px;
            }	
            .s7dimensionalview {
                top: 0px;
                left: 0px;
                width: 700px;
                height: 350px;
            }
        </style>
    </head>
    <body>
        <div id="s7container"></div>

        <script language="JavaScript" type="text/javascript">
            var params, container, mediaSet, dimensionalView;

            // Initialize the SDK
            s7sdk.Util.init();

            // Create ParameterManager instance to handles modifiers		
            params = new s7sdk.ParameterManager();
                
            // Define the function that initializes the viewer
            function initViewer(){
                // Set hardcoded modifiers (not required when values are specified on the url)
                params.push("serverurl", "https://s7d1.scene7.com/is/image/");
                params.push("contenturl", "https://s7d1.scene7.com/is/content/");

                // Create the Container component object
                container = new s7sdk.Container(null, params, "s7container");
		// Create the MediaSet component object
		mediaSet = new s7sdk.MediaSet(null, params, null);
                // Note: MediaSet.setAsset can be called any time after the MediaSet is created.
                //       The NOTF_SET_PARSED event will be sent each time a new asset is loaded.
                mediaSet.setAsset('Viewers/dynamicmedia-3d-asset');

		// Create the DimensionalView component object
                dimensionalView = new s7sdk.image.DimensionalView( container, params, "dimensionalview");
                // Add an event listener for mediaset parsed events
                // Note: This event will be emitted every time the MediaSet.setAsset function is called.
                mediaSet.addEventListener(s7sdk.event.AssetEvent.NOTF_SET_PARSED, onSetParsed, false);
	        
		function onSetParsed(event) {
        		dimensionalView.setItem(event.s7event.asset.items[0]);
            	}

            }

            // The ParameterManager will dispatch SDK_READY when all modifiers have been processed
            // and it is safe to initialize the viewer		
            params.addEventListener(s7sdk.Event.SDK_READY, initViewer, false);

            // Now it is safe to process the modifiers, the callbacks have been defined
            // this will trigger the SDK_READY event
            params.init();
        </script>

    </body>
</html>

Default styles for DimensionalView:

.s7dimensionalview {
	width: 600px;
	height: 400px;
	background-color:transparent;
	user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
 }

Parameters:
{String|Container} container: The reference to Container instance or the ID of the parent DOM element to which the component is added as a child
{s7sdk.ParameterManager} settings: A parameter manager instance that represents the desired configuration.
{String} compId: An optional parameter that specifies the ID of the components DOM element

Method Detail

addEventListener(type, handler, useCapture)

Adds an event listener to the instance of the DimensionalView component. The handler function receives a DOM event object of type Event. The object contains a property s7event, which references the associated custom event object, for example s7sdk.event.StatusEvent.NOTF_VIEW_READY.

The events supported by the component are:

s7sdk.event.ResizeEvent.COMPONENT_RESIZE - Dispatched when the component has been resized. s7sdk.event.ResizeEvent

s7sdk.event.StatusEvent.NOTF_VIEW_READY - Dispatched when component fills the view entirely with 3D model data. It is sent only after asset change. s7sdk.event.StatusEvent

Parameters:
{String} type: Event name, for example s7sdk.event.StatusEvent.NOTF_VIEW_READY.
{Function} handler: Function to be called when the event gets dispatched.
{Boolean} useCapture: Register capture phase.

dispose()

Dispose is used to remove itself and all sub-elements from the DOM

{Number} getHeight()

Returns the current inner height of the component.

Returns:: {Number} the inner height of the component, in pixels.

{Number} getWidth()

Returns the current inner width of the component.

Returns:: {Number} the inner width of the component, in pixels.

resize(width, height)

Sets the DimensionalView to the specified width and height.

Parameters:
{Number} width: - The width of the component, in pixels.
{Number} height: - The height of the component, in pixels.

setCSS(classname, property, value)

Sets a particular CSS class and property on a component

Parameters:
{String} classname: The CSS classname to use for this style. i.e. .s7dimensionalview
{String} property: The CSS property that is being set. i.e. background-color
{String} value: The CSS property value being set. i.e. #FF0000

setItem(item)

Sets the current item displayed by the component. The item must be of type StaticContentDesc. An exception is thrown if the item is not descendant of type StaticContentDesc. Calling this method will dispatch the AssetEvent.ASSET_CHANGED event.

Parameters:
item: {s7sdk.StaticContentDesc} The item to display.

See:: s7sdk.StaticContentDesc; s7sdk.event.AssetEvent

setModifier(modObj)

Sets 1-N # of modifiers for the component.

Parameters:
{Object} modObj: A simple JSON object with name:value pairs of valid modifiers for a particular component

Namespaces

Classes in s7sdk.image

Class s7sdk.image.DimensionalView