xBIM 基礎11 WeXplorer 經常使用事件

時間 2019-12-10

標籤 xbim 基礎 wexplorer 經常使用事件简体版

原文原文鏈接

系列目錄【已更新最新開發文章，點擊查看詳細】

　　本篇將介紹查看器在不一樣場合觸發的事件。全部這些都記錄在xViewer中。若是您從Web服務器運行本教程，能夠在此處查看完整的實例。而且確保您的網絡服務器設置爲做爲靜態內容提供wexBIM文件。javascript

方式一：在web.config中添加以下配置html

方式二：發佈程序後在IIS中設置java

　下面的代碼片斷 HTML 元素的 onclick 屬性中定義的 javascript 函數。這不是正確的作法，但爲了清晰和簡單起見，本文僅作示範。鼓勵您遵循這些指導原則來編寫可持續且清晰的Web應用程序。web

使用如下函數註冊處理程序很是簡單：canvas

viewer.on('event_name', callback); //註冊事件

若是再也不使用它，也可使用相似的代碼刪除處理程序：瀏覽器

viewer.onRemove('event_name', callback); //刪除事件

首先 xViewer 提供瞭如下事件服務器

下面介紹詳細的事件使用場景網絡

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>xViewer 模型瀏覽器</title>
    <style>

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
        }

        canvas {
            display: block;
            border: none;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
        }
    </style>
    <script type="text/javascript" src="Content/Libs/gl-matrix.js"></script>
    <script type="text/javascript" src="Content/Libs/webgl-utils.js"></script>

    <script type="text/javascript" src="Content/Viewer/xbim-product-type.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-state.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-shaders.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-model-geometry.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-model-handle.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-binary-reader.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-triangulated-shape.debug.js"></script>
    <script type="text/javascript" src="Content/Viewer/xbim-viewer.debug.js"></script>
</head>
<body>
    <div id="content">
        <canvas id="xBIM-viewer" width="700" height="500"></canvas>
    </div>
    <script type="text/javascript">
        var check = xViewer.check();
        if (check.noErrors) {
            var viewer = new xViewer('xBIM-viewer');
            viewer.on("error", function (arg) {
                //實時監控發送的異常信息
                var container = viewer._canvas.parentNode;
                if (container) {
                    container.innerHTML = "<pre style='color:red; font-size:14px;font-weight:bold;'>" + arg.message + "</pre>" + container.innerHTML;
                }
                });


            //var timer = 0;
            viewer.on("pick",function (args) {
                // Pick多是最重要的用戶交互事件。每次用戶點擊<canvas>區域時都會觸發該事件。
                // 它的參數包含產品ID，您能夠將其用於選擇、顯示、隱藏、從新定位和其餘交互操做

                //var id = args.id;
                //var span = document.getElementById('productId');
                //if (span) {
                //    span.innerHTML = id;
                //}

                //var time = (new Date()).getTime();
                //if (time - timer < 200)
                //    viewer.zoomTo(id);
                //timer = time;
            });

            viewer.on("mouseDown", function (arg) {
                // 模型瀏覽器中，鼠標按下點擊事件
                viewer.setCameraTarget(arg.id);
            });

            viewer.on("fps",function (fps) {
                // FPS表明「每秒幀數」。該事件被觸發，每30 個幀。這是績效指標之一。
                // Viewer的動畫循環必然會刷新瀏覽器屏幕，所以一般不會超過60fps。若是你獲得大約15fps的用戶體驗，開始有點遲鈍。
                //var span = document.getElementById('fps');
                //if (span) {
                //    span.innerHTML = fps;
                //}
            });

            // 加載一個模型文件可能須要幾秒到幾十秒，在完成加載以前，能夠顯示一個進度彈框，這樣用戶體驗更友好
            viewer.load('Content/data/FourWallsDoorWindowsRoof.wexbim'); //加載模型文件
            viewer.start();//啓動
        } else {
            alert("您瀏覽器版本太低，不支持WebGL技術。請升級瀏覽器。");
            for (var i in check.errors) {
                var error = check.errors[i];
                msg.innerHTML += "<div style='color: red;'>" + error + "</div>";
            }
        }
    </script>
</body>
</html>