Skip to content

Getting Started

Dynamic JSON Badge Dynamic JSON Badge

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
12
13
import { loadModule } from "@3ddv/dvm";

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

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
16
17
18
import { loadModule } from "@3ddv/dvm";

var instance_options = {
    container: "container"
};

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
}