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. A page runs one version of each module: the first 3d_viewer to load fixes the version for the whole page, and later loadModule calls reuse it, logging a console warning when they requested a different one Static Badge.
  • 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. The first 3d_viewer to load also fixes the build variant for the page, like 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]: true enables WebGL multisampling, false disables it. If not specified, the viewer decides from the device. It can only be set here. Static Badge
  • auto_recover_context (boolean) [optional]: true (default) to auto-recover the WebGL context after it is lost. See the auto_recover_context flag.
  • context_recovery_budget (number) [optional]: Maximum number of live 3D viewers for which a lost context still auto-recovers. 4 by default. Above this count a lost context only fires context_lost.

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.