xBIM 基础11 WeXplorer 常用事件

　　本篇将介绍查看器在不同场合触发的事件。所有这些都记录在xViewer中。 如果您从Web服务器运行本教程，可以在此处查看完整的实例。并且确保您的网络服务器设置为作为静态内容提供wexBIM文件。

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

方式二：发布程序后在IIS中设置

　下面的代码片段 HTML 元素的 onclick 属性中定义的 javascript 函数。这不是正确的做法，但为了清晰和简单起见，本文仅做示范。鼓励您遵循 这些指导原则来编写可持续且清晰的Web应用程序。

使用以下函数注册处理程序非常简单：

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>
 
posted @ 2019-06-04 11:40  张传宁  阅读(545)  评论(0)  编辑  收藏  举报
页脚 HTML 代码