Step 2: Creating instances of viewer managers

Managers

We will do further actions in the index.js file.

First, import dependencies, styles, enable viewer locales, create an instance of the scene manager, instance of the renderer:

import {SceneManager, Ui, viewerStore} from "tangl-viewer"

//import viewer styles
import "../node_modules/tangl-viewer/dist/style.css"

//enable viewer locales
Ui.setI18next()

//create main managers
const sceneManager = new SceneManager()
const renderManager = viewerStore.createRenderManager("default", sceneManager)

Init

The renderer is created with the viewerStore and is named "default".

In order for the renderer to initialize and connect to the desired DIV container, you must specify the Id of that container in the init function:

//init RenderManager with "viewer" DOM element
renderManager.init("viewer")

Extensions

Many viewer functions are controlled by extensions. The** tangl-viewer** library contains a set of standard viewer extensions. One of them is the OrbitExtension and GeneralModeExtension. It allows basic camera navigation around the 3D model and common model visual state.

Add the extensions to the import:

import {OrbitControllerExtension, GeneralModeExtension, SceneManager, viewerStore} from "tangl-viewer"

Connect the extension:

//add orbit controller extension for basic camera transformation
renderManager.extMan.addExtension(OrbitControllerExtension)
//add general mode extension
renderManager.extMan.addExtension(GeneralModeExtension)

Activate the extensions as an active controller extension and active mode extension:

//select orbit extension as default
renderManager.extMan.selectControllerExtension("orbit")
//select orbit extension as default
renderManager.extMan.selectModeExtension("general")

The overall file now looks like this:

import {GeneralModeExtension, OrbitControllerExtension, SceneManager, Ui, viewerStore} from "tangl-viewer"

//import viewer styles
import "../node_modules/tangl-viewer/dist/style.css"

//enable viewer locales
Ui.setI18next()

//create main managers
const sceneManager = new SceneManager()
const renderManager = viewerStore.createRenderManager("default", sceneManager)

//init RenderManager with "viewer" DOM element
renderManager.init("viewer")

//add general mode extension
renderManager.extMan.addExtension(GeneralModeExtension)

//select orbit extension as default
renderManager.extMan.selectModeExtension("general")

//add orbit controller extension for basic camera transformation
renderManager.extMan.addExtension(OrbitControllerExtension)

//select orbit extension as default
renderManager.extMan.selectControllerExtension("orbit")