Modelo

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.2-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.4-lts.js"></script>
  <script src="https://s3.cn-north-1.amazonaws.com.cn/api-release.modeloapp.com/prod/modeloapiui-2.2-lts.js"></script>

  <script>
  window.onload = function() {
    var modelId = "q8ZjpB8a";
    var appToken =    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTUzLCJ1c2VybmFtZSI6Ik1vZGVsbyIsImlzUGVybWFuZW50Ijp0cnVlLCJpYXQiOjE1Njc1NjI0MTksImV4cCI6MzMxMDM1NjI0MTl9.   EbW_cSPca4kWLedgNtfrGguog_o-3CCM5WhM7fFi0GA" // A sample app token
    
    Modelo.init({ endpoint: "https://build-portal.modeloapp.com", appToken });
    
    modelApp = new Modelo.UI.ModelViewer({
      modelId,
      containerId: "modelContainer",
      useDefaultFavicon: true
    });
  }

  </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.4-lts.js"></script>

    <script>
      var modelId = "q8ZjpB8a";
      var appToken =  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTUzLCJ1c2VybmFtZSI6Ik1vZGVsbyIsImlzUGVybWFuZW50Ijp0cnVlLCJpYXQiOjE1Njc1NjI0MTksImV4cCI6MzMxMDM1NjI0MTl9.  EbW_cSPca4kWLedgNtfrGguog_o-3CCM5WhM7fFi0GA"

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

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

      viewer.loadModel(modelId, progress => {
        // second parameter is an optional progress callback
        var c = document.getElementById("progress");
        c.innerHTML = "Loading: " + Math.round(progress * 100) + "%";
      }).then(() => {
        // model loaded successfully
        // add mouse to control camera.
        viewer.addInput(new Modelo.View.Input.Mouse(viewer));
        // add keyboard callback.
        var keyboard = new Modelo.View.Input.Keyboard(viewer);
        viewer.addInput(keyboard);
      });
    </script>
  </body>
 </html>