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 ...
随机推荐
- MVC/MVP/MVVM区别——MVVM就是angular，视图和数据双向绑定
摘自:http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 一.MVC MVC模式的意思是,软件可以分成三个部分. 视图(View):用户界面 ...
- Linux就该这么学 20181010(第十四章DHCP)
参考链接:https://www.linuxprobe.com DHCP动态地址分配协议 作用域:定义一个很大的网段地址池:真正为用户去分配的地址地址池要小于等于作用域排除范围:作用域-地址池租约-默 ...
- php基础知识（一）--2017-04-14
1.Php的两种打开方式: 第一种方式:地址栏打开:http://localhost/0414/qq.php 地址栏输入localhost/ 就是phpstudy下的www文件夹 第二种:新 ...
- 利用keytool颁发https证书方法
1.首先生成私有认证机构 命令:keytool -genkeypair -alias CAname 补充:keytool -list 命令增加 -v 可以查看CA详细信息 2.然后生成私有证书 命 ...
- mybatis的sql语句导致索引失效，使得查询超时
mybaitis书写sql需要特别注意where条件中的语句,否则将会导致索引失效,使得查询总是超时.如下语句会出现导致索引失效的情况: with test1 as (select count(C_F ...
- composer的一些操作
版本更新 命令行下:composer self-update 设置中国镜像 composer config -g repo.packagist composer https://packagist.p ...
- UWP 开发相关
OCR 识别问题 ocr.OcrEngine.availableRecognizerLanguages 如果 length 只有 1,有可能只能识别英文,需要安装中文语言包~
- MySQL Reading table information for completion of table and column names
打开数据库是发现提示: mysql> show databases; +--------------------+ | Database | +--------------------+ | b ...
- UVA401-Palindromes（紫书例题3.3）
A regular palindrome is a string of numbers or letters that is the same forward as backward. For exa ...
- HDU 4630 No Pain No Game (线段树+离线)
题目大意:给你一个无序的1~n的排列a,每次询问[l,r]之间任取两个数得到的最大gcd是多少 先对所有询问离线,然后把问题挂在区间的左端点上(右端点也行) 在预处理完质数,再处理一个next数组,表 ...