xBIM 基础11 WeXplorer 常用事件
本篇将介绍查看器在不同场合触发的事件。所有这些都记录在xViewer中。 如果您从Web服务器运行本教程，可以在此处查看完整的实例。并且确保您的网络服务器设置为作为静态内容提供wexBIM文件。
方式一：在web.config中添加如下配置
方式二：发布程序后在IIS中设置
下面的代码片段 HTML 元素的 onclick 属性中定义的 javascript 函数。这不是正确的做法，但为了清晰和简单起见，本文仅做示范。鼓励您遵循 这些指导原则来编写可持续且清晰的Web应用程序。
使用以下函数注册处理程序非常简单：
viewer.on('event_name', callback); //注册事件
如果不再使用它，也可以使用类似的代码删除处理程序：
viewer.onRemove('event_name', callback); //删除事件
首先 xViewer 提供了以下事件
- entityActive
- entityClick
- entityDblclick
- entityMouseDown
- entityMouseMove
- entityMouseUp
- entityTouch
- loaded
- clipped
- dblclick
- error
- fps
- frame
- loaded
- mouseDown
- pick
- unclipped
下面介绍详细的事件使用场景
<!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 常用事件的更多相关文章
- xBIM 基础10 WeXplorer 浏览器检查
系列目录 [已更新最新开发文章,点击查看详细] 在上一篇 <xBIM基础 09 WeXplorer 基本应用> 已经提到,查看器不会在所有浏览器的所有设备上运行.为了操作效率和简单 ...
- 基础5.jQuery常用事件
jQuery常用事件 1.bind() 方法 :为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 2.blur() 方法:当元素失去焦点时发生 blur 事件. 3.change() ...
- xBIM 基础08 WeXplorer 简介
系列目录 [已更新最新开发文章,点击查看详细] 一.WeXplorer 简介 WeXplorer 是 XBIM 工具包的可视化部分,它使用预处理的 WexBIM 文件在 Web 上处理 IFC ...
- Java基础11一常用类
1.包装类 byte---java.lang.Byte char---java.lang.Character short—java.lang.Short int---java.lang.Integer ...
- xBIM 基础12 WeXplorer xViewer的导航、相机、剖切、隐藏等操作
系列目录 [已更新最新开发文章,点击查看详细] 本篇将学习xViewer的导航,剪切和隐藏.这应该足以使用户能够通过所有缩放,平移,轨道运行和隐藏可能的障碍物来检查建筑物内部.点击这里可以看到 ...
- xBIM 基础09 WeXplorer 基本应用
系列目录 [已更新最新开发文章,点击查看详细] 在本教程中,将学习如何创建最基本和最直接的查看器. 除了展示建筑模型外,不做其他任何操作.它将只使用内置导航,但是不会对按钮做出事件响应. &l ...
- xBIM 基础13 WeXplorer 设置模型颜色
系列目录 [已更新最新开发文章,点击查看详细] 默认情况下模型具有合理的图形表示.这是从IFC模型中获取的,它应该在所有工具中看起来相同,它应该与您或您的用户的创作环境中的相同.但有时候能够改 ...
- JavaScript基础之常用事件
js 基础之常用事件 在js当中,事件是较为常用的内容,本篇文章来说一些常用的事件. 鼠标事件 下面是常用的鼠标事件: click 当用户按下并释放鼠标按键或其他方式"激活"元素时 ...
- WebView使用详解（二）——WebViewClient与常用事件监听
登录|注册 关闭 启舰 当乌龟有了梦想…… 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书 免费直播:AI时代,机器学习如何入门? 程序员8 ...
随机推荐
- 基于Doxygen的C/C++注释原则
基于Doxygen的C/C++注释原则 标注总述 .文件头标注 . 命名空间标注 . 类.结构.枚举标注 . 函数注释原则 . 变量注释 . 模块标注 . 分组标注 总述 华丽的分隔线 //----- ...
- Edge浏览器+微软小娜
- 学习篇之SVG
学习篇之SVG 一.use重用 与 g组合 xmlns变量实际上指示浏览器如何解释称为SVG的XML方言 <g></g> 组合 <use /> 重用 <ell ...
- css+html应用实例1：滑动门技术的简单实现
关于滑动门,现在的页面中好多地方都会用到滑动门,一般用作于导航背景,它的官方解释如下: 滑动门:根据文本自适应大小,根据背景的层叠性制作,并允许他们在彼此之上进行滑动,以创造出一些特殊的效果. 为什么 ...
- Sqlite简单操作
1.student类 public class Student { int id; String name; String sex; String address; int money; public ...
- 在Eclipse中使用Maven将项目（包括Maven引入的依赖jar文件）打成jar文件
1. 在项目的pom.xml文件中引入以下配置: <build> <plugins> <plugin> <artifactId>maven-assem ...
- Prime Distance POJ - 2689 线性筛
一个数 $n$ 必有一个不超过 $\sqrt n$ 的质因子. 打表处理出 $1$ 到 $\sqrt n$ 的质因子后去筛掉属于 $L$ 到 $R$ 区间的素数即可. Code: #include&l ...
- Codeforces Round #487 (Div. 2) C. A Mist of Florescence 构造
题意: 让你构造一个 n∗mn*mn∗m 矩阵,这个矩阵由 444 种字符填充构成,给定 444 个整数,即矩阵中每种字符构成的联通块个数,n,mn,mn,m 需要你自己定,但是不能超过505050. ...
- Day 02 - 01 计算机的操作系统
操作系统 场景:有以下三个人 1.庄园主 -->相当于人类 2.管家 --> 把人类要传达的信息分配给奴隶,相当于操作系统 3.奴隶 -->为人类干活的机器 1.操作系统做了什么? ...
- elk集群配置配置文件中节点数配多少
配置elk集群时,遇到,elasticsearch配置文件中的一个配置discovery.zen.minimum_master_nodes: 2.这里是三配的2 看到某一位的解释是这样:为了避免脑裂, ...