本篇将介绍查看器在不同场合触发的事件。所有这些都记录在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: %;

            padding: ;

            margin: ;

        }

        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="" height=""></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>
 

xBIM 基础11 WeXplorer 常用事件的更多相关文章

  1. xBIM 基础10 WeXplorer 浏览器检查

    系列目录    [已更新最新开发文章,点击查看详细]  在上一篇 <xBIM基础 09 WeXplorer 基本应用> 已经提到,查看器不会在所有浏览器的所有设备上运行.为了操作效率和简单 ...

  2. 基础5.jQuery常用事件

    jQuery常用事件 1.bind() 方法 :为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 2.blur() 方法:当元素失去焦点时发生 blur 事件. 3.change() ...

  3. xBIM 基础08 WeXplorer 简介

    系列目录    [已更新最新开发文章,点击查看详细]  一.WeXplorer 简介 WeXplorer 是 XBIM 工具包的可视化部分,它使用预处理的 WexBIM 文件在 Web 上处理 IFC ...

  4. Java基础11一常用类

    1.包装类 byte---java.lang.Byte char---java.lang.Character short—java.lang.Short int---java.lang.Integer ...

  5. xBIM 基础12 WeXplorer xViewer的导航、相机、剖切、隐藏等操作

    系列目录    [已更新最新开发文章,点击查看详细]  本篇将学习xViewer的导航,剪切和隐藏.这应该足以使用户能够通过所有缩放,平移,轨道运行和隐藏可能的障碍物来检查建筑物内部.点击这里可以看到 ...

  6. xBIM 基础09 WeXplorer 基本应用

    系列目录    [已更新最新开发文章,点击查看详细]  在本教程中,将学习如何创建最基本和最直接的查看器. 除了展示建筑模型外,不做其他任何操作.它将只使用内置导航,但是不会对按钮做出事件响应. &l ...

  7. xBIM 基础13 WeXplorer 设置模型颜色

    系列目录    [已更新最新开发文章,点击查看详细]  默认情况下模型具有合理的图形表示.这是从IFC模型中获取的,它应该在所有工具中看起来相同,它应该与您或您的用户的创作环境中的相同.但有时候能够改 ...

  8. JavaScript基础之常用事件

    js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...

  9. WebView使用详解（二）——WebViewClient与常用事件监听

      登录|注册     关闭 启舰 当乌龟有了梦想……       目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8 ...

随机推荐

  1. [SCOI 2008] 奖励关

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1076 [算法] f[i][S]表示当前第i次抛出宝物,目前集合为S,所能获得的最高分 ...

  2. 院校-美国：哈佛大学（Harvard University）

    ylbtech-院校-美国:哈佛大学(Harvard University) 哈佛大学(Harvard University),简称“哈佛”,坐落于美国马萨诸塞州波士顿都市区剑桥市,是一所享誉世界的私 ...

  3. 剑指offer——01二维数组中的查找（Python3）

    题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...

  4. BZOJ 1500 splay终结版...

    GSS系列有一丝丝像- 只不过那个是线段树 这个是splay 翻转 插入 删除啥的就是普通的splay 合在一起了而已 //By SiriusRen #include <cstdio> # ...

  5. C＃.NET编码规范

    一. 环境设置 首先去除开发环境中的一些选项如下: 图一 图二 二. 命名规范 1) 通用性 l 标识的总长度不要超过32个字符. l  标识符的基本语法是以字母和_开始,由字母数字及下划线组成的单词 ...

  6. Vue模拟酷狗APP问题总结

    一.NewSongs.vue中的38行  this.$http.get('/proxy/?json=true')   里面这个路径的获取 二.router文件夹中的index.js  中的  comp ...

  7. Building Block[HDU2818]

    Building Block Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total ...

  8. DataReader相关知识点

    C#中提供的DataReader可以从数据库中每次提取一条数据. 1. 获取数据的方式[1]DataReader 为在线操作数据, DataReader会一直占用SqlConnection连接,在其获 ...

  9. Django路由URL

    URL配置(URLconf)就像Django所支撑网站的目录.URL与要为该URL调用的视图函数之间的映射表. URLconf配置 样式: from django.conf.urls import u ...

  10. 使用面向对象技术创建高级 Web 应用程序

    作者: 出处: 使用面向对象技术创建高级 Web 应用程序 来源:开源中国社区 作者:oschina 最近,我面试了一位具有5年Web应用开发经验的软件开发人员.她有4年半的JavaScript编程经 ...