Modelo

Basic usage

Create a 3D viewer

var container = document.getElementById("canvasId");
var viewer = new Modelo.View.Viewer3D(container);

The viewer takes a HTML5 div DOM, a configuration setting, e.g., if it is on mobile platform.

Load a model to the 3D viewer

viewer.loadModel("5roe1qpYL", initialTransform,
    function (per) { // on progress
        console.log("download completes " + Math.round(per * 100) + "%");
    })
    .then(() => { // success
        console.log("loading done");
    })
    .then((errmsg) => { // fail
        console.error(errmsg);
    });

When user wants to download and display a model in the viewer, she needs to provide the model ID. The initialTransform is a 4x4 transformation matrix applied to model immediatly after it gets loaded and it can be null. Three callbacks are mandatory in the loadModel function. They listens to the success, fail and progressing events respectively.

Add mouse input

var mouse = new Modelo.View.Input.Mouse(viewer);
viewer.addMouseDownListener('Viewer', (mouse: Mouse): boolean => 
{
    console.log("mouse position.x = " + mouse.x);
    console.log("mouse position.y = " + mouse.y);
    return false;
});

Add a mouse input to the viewer. The mouse will automatically connects to the camera manipulator of the viewer and maps some mouse inputs to the camera control, like dragging with left button pressed will rotate the scene, and so on. Developers can also add their own mouse event handlers. The handler will be executed in the reverse order of the time they are added to the viewer. The later ones will be executed first. Each handler should return a boolean value to indicate if it intercepts the mouse events. If it returns true, the event stops propagate and handlers after this one will be not executed. For more details, please check out [TODO].

Load multiple models to viewer

viewer.loadModel("5roe1qpYL", null,
    function (per) { // on progress
        console.log("model 1 download completes " + Math.round(per * 100) + "%");
    })
    .then(() => { // success
        console.log("model 1 loading done");
    })
    .then((errmsg) => { // fail
        console.error(errmsg);
    });

viewer.loadModel("93@2k!df", [],
    function (per) { // on progress
        console.log("model 2 download completes " + Math.round(per * 100) + "%");
    })
    .then(() => { // success
        console.log("model 2 loading done");
    })
    .then((errmsg) => { // fail
        console.error(errmsg);
    });

Notes:

When load multiple models, the modelIds cannot be duplicated.
Different models have separate progressing, success, failure callback functions.

Tools

Element selection tool

var selectElements = new Modelo.View.Tool.SelectElements(viewer);
viewer.addTool(selectElements);
selectElements.setEnabled(true);

selectElements.setFocusingEnabled(false); // Doesn't move camera when selecting elements.
selectElements.setRegionSelectEnabled(true); // Enable region selection.

viewer.getEventEmitter().on("onElementSelected", (elementInfos) => {
    console.log(elementInfos);
    selectElementTool.setRegionSelectEnabled(false);
    // ElementInfos  is an array of elementInfo
    // Each elementInfo contains the "_ElementPathsElementName", "fileName" and "modelId"
    // Ee can track down the element with elementInfo in the bimTree
    // Additionally, we can use this the heighlight the element with modelo api (see the sections below)
});

Section tool

var section = new Modelo.View.Tool.Section(viewer)
viewer.addTool(section);
toggleSection();
viewer.invalidate(); // refresh the viewer

Note that we should always add the section tool after the model is done loading because section tool needs to be aware of the scene's size.

Ruler

var ruler = new Modelo.View.Tool.MeasureLine(viewer);
viewer.addTool(ruler);
ruler.setEnabled(true);
ruler.setSnappingEnabled(true); // Snap to edge.

There are different types of rulers to measure angle, poly-lines, area and so on. Please check out TODO.

Camera Manipulation

viewer.getCamera().switchToView(Modelo.View.ViewAngle.TOP);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.BOTTOM);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.FRONT);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.BACK);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.LEFT);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.RIGHT);
viewer.getCamera().switchToView(Modelo.View.ViewAngle.WORLD); // A computed view angle for a good view.

One can control scene to change to different view directions.

Magnify glass tool

var magnifyGlass = new Modelo.View.Tool.MagnifyGlass(viewer);
viewer.addTool(magnifyGlass);
magnifyGlass.setEnabled(true);

Magnify glass is to zoom into a specific region by drawing a rectangle on the screen. Note that magnifyGlass re-use the left-button-drag as camera rotation does. If we need to enable camera rotation again, we should disable magnify glass.

Set camera to perspective or orthogonal

document.getElementById("toggleCamera").addEventListener("click", function () {
    if (perspective) {
        viewer.getCamera().transformToOrthogonal();
    } else {
        viewer.getCamera().transformToPerspective();
    }
    perspective = !perspective;
});

Lighting

viewer.setLightingIntensity(0.5); // The lighting brightness between 0 and 1.
viewer.setAmbientShadowEnabled(true); // Enable the ambient shadow.
viewer.setLightingLatitude(1.0); //  The height of light; ranges in [0, pi/2]. pi/2 when light is at north polar.
viewer.setLightingLongitude(3.14); // The position of light; ranges in [0, pi*2]. 0 when light is at east.
viewer.setShadowEnabled(true); // Enable shadow.

Lighting is the key to render objects with 3D feeling. Please tweak your lighting setting to your best flavor.

Element manipulation

Set elements' visibilities

viewer.setElementsVisibility(elementNames, false); // Hide elements with given element IDs.
viewer.invalidate(); // refresh the rendering.

Set elements' custom colors

var randomColor = [Math.random(), Math.random(), Math.random()];
viewer.setElementsColor(elementNames, randomColor);
viewer.invalidate();

viewer.setElementsColor(coloredElements, null); // Restore element colors to their original colors.
viewer.invalidate();