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 ...
随机推荐
- poj--3207--Ikki's Story IV - Panda's Trick（2-sat）
Ikki's Story IV - Panda's Trick Time Limit: 1000MS Memory Limit: 131072KB 64bit IO Format: %I64d ...
- docker初安装的血泪史
最近docker很火,不管是朋友圈内还是公司内聊天都离不开docker,于是对docker产生了极大的好奇心,凭着一颗程序猿的好奇心开始了docker的安装血泪史. 首先我有一台从公司退役的本本x22 ...
- Java NIO（六）选择器
前言 Selector选择器是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样使得一个单独的线程可以管理多个Channel,从而管理多个网络连接.选择 ...
- Java NIO（四）文件通道
文件通道 通道是访问I/O服务的导管,I/O可以分为广义的两大类:File I/O和Stream I/O.那么相应的,通道也有两种类型,它们是文件(File)通道和套接字(Socket)通道.文件通道 ...
- 关于getElementsByTagName的遍历顺序
关于getElementsByTagName的遍历顺序是怎么样的呢? getElementsByTagName的遍历顺序是从HTML的页面从上到下遍历还是按照标签的嵌套顺序层层遍历的呢? 来做个小小的 ...
- HTML5中canvas介绍
1.什么是Canvas canvas 是 HTML5 提供的一个用于展示绘图效果的标签 canvas 提供了一个空白的图形区域,可以使用特定的JavaScript API来绘画图形(canvas 2D ...
- （转载）解决切换Fragment时布局重新实例化
解决切换Fragment时布局重新实例化 作者 instanceof 关注 2015.12.30 17:25* 字数 628 阅读 7616评论 17喜欢 23 关于Fragment 在这简单说一下F ...
- TP为什么这个if判断什么都不显示？
既不显示aaa也不显示bbb这是为什么? <if condition="isset(session('name'))"> aaa <else /> bbb ...
- python包管理（distutils、easy_install、pip、setup.py/requirements.txt、wheel）
distutils.distutils2 distutils是 python 标准库的一部分,2000年发布.使用它能够进行 python 模块的 安装 和 发布. distutils2 被设计为 d ...
- solarwind之network Atlas
1. 连接密码为空,连接到Orion 2. 连接后如下图 3. 直接拖动节点即可进行绘制地图 4. 查看它的相关属性