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 ...
随机推荐
- svn是什么
svn是什么 SVN是Subversion的简称,是一个开放源代码的版本控制系统,相较于RCS.CVS,它采用了分支管理系统,它的设计目标就是取代CVS.互联网上很多版本控制服务已从CVS迁移到Sub ...
- Regexp-Utils：基本
ylbtech-Regexp-Utils:基本 1.返回顶部 1. /** * 管理 */ var utils = { hostUrl: "http://localhost:8023&quo ...
- vue --- 关于多个router-view视图组件，渲染同一页面
vue.js多视图的使用,可以提高网页组件化,模块化 比如使用多视图,可以将网站页面封装header.footer.navbar等多个公共部分, 遇到修改公共部分的文案信息等数据的时候,不再需要逐一修 ...
- 16.QT鼠标
头文件 #include <QMouseEvent> #include <QStatusBar> #include <QLabel> protected: //鼠标 ...
- NOIp2018之前打模板出现的问题汇总
灵感来源是因为调试了一下午dij,就想把错误记下来 dij:结构体里的重载运算符不会写 结构体声明后要加引号 用于排序的结构体按照边长度排序 匈牙利:在dfs中的if语句中,要继续搜 ...
- BZOJ 3667 Pollard-rho &Miller-Rabin
论O(1)快速乘和O(logn)快速乘的差距-. //By SiriusRen #include <cstdio> #include <algorithm> using nam ...
- Asp.Net Core部署到Linux服务器
从2016年7月, .NET Core1.0 正式发布开始,由于时间问题,我没怎么关注过.NET Core,最近刚抽出点时间研究了下,先讲下如何把ASP.NET Core部署到Linux上吧.这里我用 ...
- Bluefish Editor - 蓝鱼编辑器 for Web Designer
Bluefish is a GTK+ HTML editor for the experienced web designer. Its features include nice wizards f ...
- 解决从Excel导入数据库，导入到DataTable时数据类型发生变化的问题(如数字类型变成科学计数法，百分数变成小数)
做项目的时候,C#读取Excel数据到DataTable或者DataSet,设断点查看DataTable,发现Excel的显示为较长位数数字的字段如0.000012在DataTable中显示为科学计数 ...
- systemd bug: bz1437114 core:execute: fix fork() fail handling in exec_spawn()
问题现象 大量僵尸进程 root 32278 0.0 0.0 0 0 ? Z 05:39 0:00 [runuser] <defunct> root 32280 0.0 0.0 0 0 ? ...