Getting Started¶

This module is responsible for loading 3D Views and managing the interaction with them.

Loading the Module¶

The identifier of this module is 3d_viewer.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

var input_options = {
    container: "container-id"
};

DVM.loadModule("3d_viewer", input_options)
    .then(function(viewer3d) {
        console.log(`Module '${viewer3d.getModuleName()}' initialized:`, viewer3d);
    })
    .catch(function(err) {
        console.error(err);
    });

Input Options Object¶

The input options object contains all the basic configuration, including callbacks. The following main options may be included:

• container (string|HTMLElement): HTML element or its id where the widget will be attached.
• callbacks (Object) [optional]: You can see a list with the available callbacks here.
• plugins (string[]) [optional]: List of plugins to be installed in this instance.
• version (string) [optional]: You can specify the 3d_viewer version to be downloaded, usually latest or stable. stable by default.
• client_id (string) [optional]: Use ONLY if MMC gives you a code to use. It may enable custom functionalities.
• modern (boolean) [optional]: false to force the ES5 build download. If not specified or true it will check if the browser is compatible with ES2015+ build and download the compatible version.
• shadowroot (boolean) [optional]: if you instantiate the module with shadowroot=true, it will attach the viewer to a ShadowRoot, and its styles to it, isolating it from the rest of the document. Global styles won't affect it. If 'container' is inside a ShadowRoot, shadowroot must be used.

Input Options Object Example¶

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

var instance_options = {
    container: "container"
};
DVM.loadModule("3d_viewer", input_options)
    .then(function(viewer3d) {
        console.log(`Module '${viewer3d.getModuleName()}' initialized:`, viewer3d);
        start(viewer3d);
    })
    .catch(function(err) {
        console.error(err);
    });

function start(viewer3d) {
    // START USING THE MODULE HERE
}