Modelo API

Modelo API provides the every bit of functionalities you need to build a BIM platform.

Basic usage

Create a model viewer with default UI.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapiui-2.1-lts.css" type="text/css" />
  <style type="text/css"> #modelContainer { width:100%; height:100%; position: absolute; }
</style>
</head>

<body>
  <div id="modelContainer"></div>
  <script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapi-2.1-lts.js"></script>
  <script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapiui-2.1-lts.js"></script>

  <script>
  window.onload = function() {

    Modelo.init({
      endpoint: "https://build-portal.modeloapp.com",
      token: "c2FtcGxlcyxtb2RlbG9TQU1QTEVT"
    });

    let modelViewer = new Modelo.ModelViewer({
                        containerId: "modelContainer",  // The HTML DOM placeholder
                        useDefaultFavicon: true,        
                        modelId: "wm8vx71L",                
                        onReady: (viewer) => {},        // The viewer is the object that controls the rendering.
                        onError: (err) => {}            // An error message.
                });
  };
  </script>
</body>
</html>

Create a model viewer without UI.

<html>
  <body>
    <div id="modelContainer" style="width: 1280px;height: 800px"></div>
    <input id="ruler" type="checkbox" name="public" />

    <script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapi-2.1-lts.js"></script>

    <script>
        Modelo.init({
            endpoint: "htts://build-portal.modeloapp.com",
            token: "c2FtcGxlcyxtb2RlbG9TQU1QTEVT"
        });

        var viewer = new Modelo.View.Viewer3D("modelContainer");

        var modelId = "wm8vx71L";
        viewer.loadModel(modelId, null, function(per) {})
                .then(function () {
                    viewer.addInput(new Modelo.View.Input.Mouse(viewer)); // Add mouse to control camera

                    var ruler = new Modelo.View.Tool.MeasureLines(viewer);
                    viewer.addTool(ruler);
                    document.getElementById("ruler").onchange = function() {
                        var t = document.getElementById("ruler").checked;
                        ruler.setEnabled(t);
                        viewer.invalidate();
                    };
                })
                .catch(function (errmsg) {
                    console.log(errmsg); // The loading error.
                });
    </script>
  </body>
 </html>