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.
  • antialias (boolean) [optional]: requests WebGL multisample antialiasing, or declines it. If not specified, the viewer decides from the device. It can only be set here: WebGL context attributes cannot change once the context exists. Static Badge

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
}

License

DVM and its modules use fragments of open source projects. You can check the updated license of 3d-viewer module here.