xBIM 实战02 在浏览器中加载IFC模型文件并设置特效
系列目录 【已更新最新开发文章，点击查看详细】
在模型浏览器中加载模型后，可以对模型做一些特殊操作。下图是常用的设置。
都是通过 xbim-viewer.js 中的 API 来设置以达到一定的效果。代码如下：
<!DOCTYPE html>
<html>
<head>
<title>xViewer</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <script src="Content/Libs/gl-matrix.js"></script>
<script 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> <script src="Content/Plugins/NavigationCube/xbim-navigation-cube-shaders.debug.js"></script>
<script src="Content/Plugins/NavigationCube/xbim-navigation-cube.debug.js"></script>
<script src="Content/Plugins/NavigationCube/xbim-navigation-cube-textures.debug.js"></script> <script src="Content/Plugins/NavigationHome/xbim-navigation-home-textures.debug.js"></script>
<script src="Content/Plugins/NavigationHome/xbim-navigation-home.debug.js"></script>
<script src="Content/Libs/jquery.js"></script>
<style>
html, body {
height: 100%;
padding: 0;
margin: 0;
} canvas {
display: block;
border: none;
margin-left: auto;
margin-right: auto;
} #operate {
display: inline;
border: 1px;
margin-top: 20px;
margin-left: 20px;
margin-right: auto;
padding-top: 20px;
} .select {
margin-top: 20px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="msg"></div>
<div class="select">
<input type="file" id="input" accept=".wexbim" />
</div>
<div style="float: left; margin: 20px;"><canvas id="xBIM-viewer" width="750" height="500"></canvas></div>
<div id="operate">
<div> </div>
<div>
<div>
Selected ID: <span id="coords"></span>
</div>
<div>
帧数 (FPS): <span id="fps"></span>
</div>
</div>
<div> </div>
<div>
导航模式：
<button onclick="setNavigation('zoom');">缩放</button>
<button onclick="setNavigation('pan');">平移</button>
<button onclick="setNavigation('fixed-orbit');">固定动态观察</button>
<button onclick="setNavigation('free-orbit');">自由动态观察</button>
<button onclick="setNavigation('none');">无</button>
</div>
<div> </div>
<div>
观察视角：
<button onclick="setShow('front');">前</button>
<button onclick="setShow('back');">后</button>
<button onclick="setShow('top');">上</button>
<button onclick="setShow('bottom');">下</button>
<button onclick="setShow('left');">左</button>
<button onclick="setShow('right');">右</button>
</div>
<div> </div>
<div>
局部：
<button onclick="clip();">剖切</button>
<button onclick="unclip();">复原</button>
</div>
<div> </div>
<div>
相机：
<button onclick="setCamera('perspective');">透视</button>
<button onclick="setCamera('orthogonal');">正交</button>
</div>
<div> </div>
<div>
渲染模式：
<label>
<input type="radio" name="radioRenderingMode" value="normal" checked="checked" onchange="setRenderingMode('normal');" /> Normal
</label>
<label>
<input type="radio" name="radioRenderingMode" value="xray" onchange="setRenderingMode('x-ray');" /> X-Ray
</label>
</div>
<div> </div>
<div>
其他：
<button onclick="selectAllWalls();">选中所有墙</button>
<button onclick="resetWalls();">复原</button>
<button onclick="hideWalls();">隐藏所有墙</button>
</div>
<div> </div>
<div>
设置状态：
<button onclick="setStateShowAll();">显示所有</button>
<button onclick="setStateGlass();">设置滤镜效果</button>
<button onclick="setStateWhite();">设置为白色</button>
<button onclick="setStateDefault();">设置默认</button>
<button onclick="setStateHideSpace();">隐藏空格</button>
<button onclick="setStateShowSpace();">显示空格</button>
</div>
</div>
<script type="text/javascript">
var modelId = -9999;
var check = xViewer.check();
if (check.noErrors) {
var viewer = new xViewer("xBIM-viewer");
viewer.background = [0, 0, 0]; //设置模型浏览器的背景色 viewer.on("error",
function (arg) {
var container = viewer._canvas.parentNode;
if (container) {
container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
}
}); //实时监控异常发生事件 viewer.show("back"); viewer.on("loaded", function (model) {
modelId = model.id; //第一次加载的是0，第二次加载的1，每次递增
}); viewer.on("pick", function (arg) {
var span = document.getElementById("coords");
if (span) {
span.innerHTML = arg.id;
}
});
viewer.on("mouseDown", function (arg) {
viewer.setCameraTarget(arg.id);
});
viewer.on("fps", function (fps) {
var span = document.getElementById("fps");
if (span) {
span.innerHTML = fps;
}
});
var span = document.getElementById("fpt");
if (span) {
span.innerHTML = viewer._fpt != null;
} //viewer.load("Content/tests/data/rac_advanced_sample_project.wexbim"); //加载模型文件
//viewer.start(); //使用此函数可以启动模型的动画。如果在加载几何图形之前启动动画，它将等待内容呈现。此函数绑定到屏幕的浏览器帧速率，因此如果切换到其他选项卡，它将停止消耗任何资源。 $("#input").change(function () {
if (!input.files) return; var file = this.files[0];
if (!file) return; if (modelId !== -9999) {
viewer.unload(modelId); //如果之前已经加载过模型，则将模型卸载掉
} viewer.load(file, file.name);//重新加载新的模型
viewer.start(); var cube = new xNavigationCube();
viewer.addPlugin(cube); // 添加立方体导航 var home = new xNavigationHome();
viewer.addPlugin(home); // 添加首页导航
}); // 设置导航模式
var setNavigation = function (mode) {
viewer.navigationMode = mode;
} // 设置观察视角
var setShow = function (direction) {
viewer.show(direction);
} // 剖切
var clip = function () {
viewer.clip();
} // 还原
var unclip = function () {
viewer.unclip();
} // 设置相机模式
var setCamera = function (mode) {
viewer.camera = mode;
} // 设置渲染模式
var setRenderingMode = function (mode) {
viewer.renderingMode = mode;
} var types = xProductType;
var states = xState;
viewer.defineStyle(0, [255, 0, 0, 255]); //red
viewer.defineStyle(1, [0, 0, 255, 100]); //semitransparent blue
viewer.defineStyle(2, [255, 255, 255, 255]); //white // 选中所有墙
var selectAllWalls = function () {
viewer.setState(states.HIGHLIGHTED, types.IFCWALLSTANDARDCASE);
viewer.setState(states.HIGHLIGHTED, types.IFCCURTAINWALL);
viewer.setState(states.HIGHLIGHTED, types.IFCWALL);
} // 隐藏所有墙
var hideWalls = function () {
viewer.setState(states.HIDDEN, types.IFCWALLSTANDARDCASE);
viewer.setState(states.HIDDEN, types.IFCCURTAINWALL);
viewer.setState(states.HIDDEN, types.IFCWALL);
} // 复原
var resetWalls = function () {
viewer.setState(states.UNDEFINED, types.IFCWALLSTANDARDCASE);
viewer.setState(states.UNDEFINED, types.IFCCURTAINWALL);
viewer.setState(states.UNDEFINED, types.IFCWALL);
} // 设置状态，显示所有
var setStateShowAll = function() {
for (var i in types) {
if (types[i] !== types.IFCSPACE) {
viewer.setState(states.UNDEFINED, types[i]);
}
}
} // 设置状态，滤镜效果
var setStateGlass = function() {
for (var i in types) {
if (types[i] !== types.IFCSPACE) {
viewer.setStyle(1, types[i]);
}
}
} // 设置状态，白色效果
var setStateWhite = function() {
for (var i in types) {
if (types[i] !== types.IFCSPACE) {
viewer.setStyle(2, types[i]);
}
}
} // 设置状态，默认效果
var setStateDefault = function() {
for (var i in types) {
if (types[i] !== types.IFCSPACE) {
viewer.setStyle(xState.UNSTYLED, types[i]);
}
}
} // 设置状态，隐藏空格
var setStateHideSpace = function() {
viewer.setState(states.HIDDEN, types.IFCSPACE);
} // 设置状态，显示空格
var setStateShowSpace = function() {
viewer.setState(states.UNDEFINED, types.IFCSPACE);
} } else {
alert("您浏览器版本过低，不支持WebGL技术。请升级浏览器。"); var msg = document.getElementById("msg");
for (var i in check.errors) {
var error = check.errors[i];
msg.innerHTML += "<div style='color: red;'>" + error + "</div>";
}
}
</script>
</body>
</html>
系列目录 【已更新最新开发文章，点击查看详细】
xBIM 实战02 在浏览器中加载IFC模型文件并设置特效的更多相关文章
- xBIM 实战01 在浏览器中加载IFC模型文件
系列目录 [已更新最新开发文章,点击查看详细] 一.创建Web项目 打开VS,新建Web项目,选择 .NET Framework 4.5 选择一个空的项目 新建完成后,项目结构如下: 二.添 ...
- 解决方案：带格式化文本控件（ RichText）的模板如果在InfoPath的浏览器中加载可能出现 COM 组件的80040154错误
建议大家在微软的组件出现问题时,在GOOGLE上搜索解决方案,一般来说,总有结果: 带格式化文本控件( RichText)的模板如果在InfoPath的浏览器中加载,可能出现 COM 组件的80 ...
- Spring中加载ApplicationContext.xml文件的方式
Spring中加载ApplicationContext.xml文件的方式 原文:http://blog.csdn.net/snowjlz/article/details/8158560 1.利用Cla ...
- VC中加载LIB库文件的三种方法
VC中加载LIB库文件的三种方法 在VC中加载LIB文件的三种方法如下: 方法1:LIB文件直接加入到工程文件列表中 在VC中打开File View一页,选中工程名,单击鼠标右键,然后选中&quo ...
- 在C 中加载TorchScript模型
本教程已更新为可与PyTorch 1.2一起使用 顾名思义,PyTorch的主要接口是Python编程语言.尽管Python是合适于许多需要动态性和易于迭代的场景,并且是首选的语言,但同样的,在 许多 ...
- UIWebView中加载HTML的Table,td设置百分比宽度并且宽度不被里面的内容撑开
正常情况下,iOS使用WebView加载HTML的Table时,为了让Table适应屏幕宽度,会使用百分比设置td的宽度,但是由于td中的内容过多,td会被撑开,导致整个Table的宽度会变宽,超出屏 ...
- 如何让Chrome浏览器可以加载本地XML文件？
Chrome浏览器的安全限制,禁止本地加载XML等外部文件,如何设置让其可以加载呢? 有两种方法,第一种是在本地服务器环境下浏览,采用 http://localhost/ 的方式浏览你的网页和文件,就 ...
- 机器学习之保存与加载.pickle模型文件
import pickle from sklearn.externals import joblib from sklearn.svm import SVC from sklearn import d ...
- Qt3D使用assimp加载常规模型文件
Qt3D使用assimp加载三维模型文件,assimp支持很多常规格式的三维模型格式: 其中支持导入的格式有: 3D 3DS 3MF AC AC3D ACC AMJ ASE ASK B3D BLEND ...
随机推荐
- layer最大话.最小化.还原回调方法使用
<head> <meta charset="UTF-8"> <title>layer最大话.最小化.还原回调方法使用</title> ...
- Chrome 开发工具系列
- rel= "noopener"
rel= "noopener" <a href= "https://www.xiaogezi.cn/" target= "_blank" ...
- Java NIO（四）文件通道
文件通道 通道是访问I/O服务的导管,I/O可以分为广义的两大类:File I/O和Stream I/O.那么相应的,通道也有两种类型,它们是文件(File)通道和套接字(Socket)通道.文件通道 ...
- 401 - Unauthorized: Access is denied due to invalid credentials.
solution:change application pool from ApplicationPoolIdentity to NetworkService.
- 常用sql调优《一》
1. 使用索引,避免在索引列上使用计算． 2.用>=替代> <=替代< 3.用UNION替换OR (适用于索引列) 4.用IN来替换OR 或者 用EXISTS替代IN 5 用W ...
- 脚本_使用expect自动交互远程主机安装软件
#!bin/bash#功能:使用expect工具自动交互密码,远程到其它主机,安装httpd软件#作者:liusingbon#删除~/.ssh/known-hosts后,ssh远程任何主机,系统都会询 ...
- 用Javascript做一个“获取验证码”的按钮
要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...
- [转] hadoop MapReduce实例解析-非常不错，讲解清晰
来源:http://blog.csdn.net/liuxiaochen123/article/details/8786715?utm_source=tuicool 2013-04-11 10:15 4 ...
- Mysql字段合并
现有数据 合并字段显示:利用GROUP_CONCAT(course,":","score") 严格区分大小写!GROUP_CONCAT 复制代码 SELECT ...