Home > @modelo.io/api > Viewer3D

Viewer3D class

A Viewer3D object takes in an HTML5 DOM and draw 3D models over this DOM. It captures the input methods, e.g., mouse, keyboard whenever they are enabled, and other browser events, e.g., resize and take correspoinding actions.

Signature:

export default class Viewer3D extends Viewer 

Constructors

ConstructorDescription
(constructor)(containerId, config)Constructor a 3D viewer.

Methods

MethodDescription
addInput(input)Add an input method to this viewer, e.g., mouse.
destroy()Stop rendering, destroy the viewer and release all internal resources.
dumpScreen(width, height, bgColor)Capture current frame of the canvas to the image with specified width, height and background color.
enterExplodedView(elementsArray, translations)Enter the explosion rendering view. In this view, we will render a number of elements with specified translation. There is a transition animation from current rendering to the final explosion result. In this view, no tools and effects are available. Refer to samples/explode-view for the usage.
focusElements(elementNames)Set to a close-up view of elements.
getCamera()Get the camera of the scene
getElapsedFrames()How many frames have been rendered by far.
getKeyboard()Return the keyboard input object of this viewer.
getMaterialManager()Get the resource manager.
getMouse()Return the mouse input object of this viewer.
getScene()Get the scene.
getSelectedElements()Returns the names of currently selected elements.
invalidate()Invalidate the current rendering and refresh it again.
isEffectEnabled(effect)Return true if the rendering effect is enabled.
isSmartCullingEnabled()If the smart culling is enabled. The smart culling aims at reduce the rendering time of a large model. It skips rendering small or unimportant objects when camera rotates.
loadModel(modelId, configOrOnProgress, changeCamera)Load a model into current viewer.
pause()Pause the current viewer's internal application update cycle. When paused, the internal update is stopped to save computation. For example, application can call this function when the browser tab is hidden.
quitExplodedView()Quit the exploded view and back to normal view.
resize(width, height)Resize the viewer. This function will be called automatically when browser tab is resized.
resume()Resume the viewer's update cycle.
setBackgroundColor(color)Set the background color of the viewer.
setBackgroundImage(image)Set the background image of the viewer
setBackgroundMode(mode)The background image tiling mode.
setContextLostCbk(cbk)Set the callback function when the webgl context is lost.
setContextRestoreCbk(cbk)Set the callback function when the webgl context is restored.
setEffectEnabled(effect, enabled)Enable/Disable rendering effect.
setEffectParameter(effect, name, value)Set the parameter for certain rendering effect.
setLazyRenderingEnabled(enabled)If lazy rendering is on, the rendering stops when camera stops. It saves the CPU and GPU cycles. Moreover, some computational expensive effects are only available at lazy rendering mode, e.g., ambient occlusioin.
setLightingIntensity(intensity)Change the lighting intensity.
setLightingLatitude(angle)Set the height of light.
setLightingLongitude(angle)Set the direction of light.
setOITEnabled(enabled)Enable the order independent transparency rendering.
setOverrideColor(color)Set all elements to the same color. Note that this change only take effects temporarily at this session. It does not change the scene data so that the color setting is not preserved next time.
setRenderingLinesEnabled(enabled)Render profile, contour or other kind of lines in model.
setShadowEnabled(enabled)Turn on/off shadow rendering.
setSmartCullingEnabled(enabled)Enable the culling when rotation. When it is enabled, some elements will be hidden during camera aniatmion to accelerate the rendering. This cull policy is based on the knowledge of the scene which is why it is called smart culling.
setSpecularEnabled(enabled)Turn on/off specular light.
setUpdateCallback(cbk)Set the callback function when rendering is about to happen.

Example 1

// Create a default model viewer.
var modelViewer = new Modelo.View.Viewer3D("model");

Example 2

// Create a model viewer that has transparent background (the DOM behind the canvas can pass through).
var modelViewer = new Modelo.View.Viewer3D("model", {transparent: true});

Example 3

// Create a model viewer on mobile platform.
var modelViewer = new Modelo.View.Viewer3D("model", {isMobile: true});