Manual Reference Source

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

  <script> 
  window.onload = function() {          

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

    let modeloApp = new Modelo.ModelViewer({
                        containerId: "modelContainer",
                        useDefaultFavicon: true,                                                
                        modelId: "wm8vx71L",
                        onReady: (viewer) => {},
                        onError: (err) => {}
                });
  };   
  </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.0-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>