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 ...
随机推荐
- linux 安装redis zookeeper
安装redis: http://www.redis.cn/download.html 安装的前提条件: 需要安装gcc:yum install gcc-c++ wget http://download ...
- 在C#中运行PowerShell
C#中运行PowerShell需要用到System.Management.Automation.dll.在Visual Studio中可以通过NuGet添加引用,package名字为"Sys ...
- Edge浏览器+微软小娜
- JS装饰器模式
装饰器模式:在不改变原对象的基础上,通过对其进行包装拓展(添加属性或者方法),保护原有功能的完整性需要条件:原对象,新内容(属性/方法)个人理解:重新实现一下,原对象的方法,在方法内容,先执行原对象的 ...
- JSON是什么？为JavaScript准备的数据格式
JSON是什么?为JavaScript准备的数据格式 还不了解JSON是什么?看了下面这篇文章,您对JSON是什么应该能够有了一个比较清晰的概念. JSON 即 JavaScript. Object ...
- stm8s103调试注意点
外设时钟的配置,有次ADC就是不工作,查问题查了很久,总是怀疑ADC配置问题,然后利用库函数的例程,发现就可以,最后发现,外设时钟没开启,外设时钟如下配置 CLK->PCKENR1 = 0x00 ...
- 【AnjularJS系列前篇 】 适用场景
AngularJS是一个 MV* 框架,最适于开发客户端的单页面应用.它不是个功能库,而是用来开发动态网页的框架. 它专注于扩展HTML的功能,提供动态数据绑定(data binding),而且它能跟 ...
- 使用其他Java工程导入hadoop源码用于在hadoop工程中查看源码
疑问:在开发hadoop程序的时候,有时候需要查看hadoop的源码,但是开发环境看不到,甚是烦恼,经过网上搜索和琢磨,终于实现了,虽然有点绕,但是目的达到了. 第一步:下载hadoop的源码包:ha ...
- 凸多边形 HRBUST - 1429 计算几何_凸包_未调完
任选一个点作为起始点,将其他点按与该点连线的极角排序,二分查询点在哪两个射线之间, 并特别判断一下边界即可. Code: #include <cstdio> #include <al ...
- Facebook再次爆出安全漏洞，9000万用户受影响
今年上半年开始,美国社交媒体Facebook因数据泄露事件和涉嫌操纵选举等问题频繁接受听证会拷问,然而事情却远没有结束.今年9月Facebook再次爆出安全漏洞,导致9000万用户可能受到影响. 根据 ...