vizbim 3.0 帮助文档
vizbim 是一个轻量化ifc模型查看库。
image
依赖
vizbi 3.0中被验证的依赖
css部分
- spectrum(1.8.0)
js部分
- jquery(3.1.1)
- bootstrap-treeview(1.2.0)
- spectrum(1.8.0)
- threejs(r84)
vizbi 3.0.0.6中被验证的依赖
css部分
- spectrum(1.8.0)
js部分
- jquery(3.1.1)
- bootstrap-treeview(1.2.0)
- spectrum(1.8.0)
- threejs(r87)
入门指南
使用
下载压缩过的js文件和css文件，添加到你的html文件中。
这是一段示例：
<link href="libs/viewerplus/3.0.0/css/BIMWINNER.viewer.min.css" rel="stylesheet">
<script type="text/javascript" src="libs/viewerplus/3.0.0/BIMWINNER.viewer.min.js"></script>
需要在你的html文件中添加一个div元素，用来承放三维世界。你需要为这个div指定一个id，这个id在接下来的使用中用到。
这是一段示例：
<div id="viewport" style="width: 100%; height: 100%;"></div>
现在你可以创建三维世界的框架了。
首先你需要配置一些参数：（蓝图版）
- viewport: 这是上一步中你创建的div的id。
- baseaddress: 数据库地址+数据库名称+接口名称
- DBversion:数据库的版本
- webApiAddress:在找不到模型文件时的重新解析的请求地址，可以为空
- cn:是用户识别码，可以为空
- imgURL:图片资源基础路径
这是示例：
var op = {
viewport: "viewport",
baseaddress: "http://101.251.195.70:8230/_db/ifcDb/api/",
DBversion:"3.1",
webApiAddress:"",
cn:""，
imgURL:"./libs/viewerplus/3.0.0/css/img"
};
首先你需要配置一些参数：（bos版）
- viewport: 这是上一步中你创建的div的id。
- baseaddress: bos平台接口地址。
- type:vizbim服务的类型，bos版填写"app"
- accessToken:用户令牌,
- imgURL:图片资源基础路径
- appKey:应用的key
这是示例：
var op = {
viewport: "viewport",
baseaddress: "http://101.251.197.35:8080/v1-z/",
type:"app",
accessToken:"123456",
appKey:"u431523053194d919bd7b21ca4f1338f",
imgURL:"./libs/viewerplus/3.0.0/css/img"
};
React版
根据使用的后台，选择蓝图版或bos版的参数配置。
需要注意以下几点：
- css和js的引入，如果按照react的方式引入无效的话，请直接添加在根index.html中。
- 确保创建主对象时，div元素已经存在于dom树中。
- 确保配置了正确的图片资源基础路径，否则视图控制器上的方位图片和测距功能结果展示的图片无法显示
- 其他方面和普通h5版本一致。
创建主对象
这里创建的主对象，包含了主要的方法和接口。创建时需要上面配置的参数。
示例：
var vizbim=new BIMWINNER.Viewer(op);
创建工具栏
这里创建的工具栏包含两部分，第一部分是下方的基础工具栏，第二部分是右上方的高级工具栏。
他们都在Tool对象中，需要分别调用创建：createTool()。调用createTool方法时可以选择保留哪些按钮。创建Tool对象时需要上一步中创建的主对象作为参数传递到Tool对象中去。
这是示例：
var tool = new BIMWINNER.Tool(vizbim);
tool.createTool({
home:true,// 是否显示初始化按钮
fit:true,// 是否显示自适应按钮
restore:true, // 是否显示还原按钮
roam:true, // 是否显示漫游按钮
multiple:true, // 是否显示框选按钮
transparent:true,// 是否显示透明化按钮
hide:true, // 是否显示隐藏按钮
isolation:true, // 是否显示隔离按钮
sectioning:true, // 是否显示剖切按钮
modelPartition:true, // 是否显示模型分解按钮
wireframe:true, // 是否显示线框化按钮
color:true, // 是否显示设置颜色按钮
setting:true, // 是否显示设置按钮
modelTree:true,// 是否显示模型树按钮
attribute:true, // 是否显示属性按钮
search:true, // 是否显示搜索按钮
measurement:true // 是否显示测距按钮
});
完成初始化
当你完成上面的操作之后，三维世界就已经准备完毕。正常完成之后的页面是这样的：
image
</center>
你会发现页面上除了一个小方块和两个工具条什么都没有。不用担心，在了解了页面上的布置之后就会进行模型的加载。
页面布置介绍
视图控制器
位于页面左上方的小方块被称为视图控制器。点击小方块上不同的面、角、棱会将模型转换到不同的视角。鼠标移动到相应的位置会有颜色提示。
image
</center>
基础工具栏
用户的基础操作都在这个区域，主要包含了对相机的控制，对构件的控制，以及一些其他小功能。
<center>
image
</center>
从左到右的功能依次为：
复位
将模型恢复到初始状态，包括相机的位置，观察点、构件的状态等。
<center>
image
</center>
位置自适应
将选中的构件或模型整体按当前视角移动的屏幕中合适的位置
<center>
image
</center>
还原
将模型的状态按照选定的方法还原为初始状态。
分别有：
- 构件可见性
- 构件高亮
- 构件透明
- 构件线框化
- 构件颜色
- 模型视角
image
</center>
漫游
第一次点击打开漫游功能，第二次点击关闭漫游功能。
漫游功能为以第一人称的视角在模型内移动，可以模拟人体的移动和身体的旋转。
<center>
image
</center>
框选功能
第一次点击打开框选功能，第二次点击关闭框选功能。
框选功能是提供一个框体，位于框体之内的构件会被选中并高亮，未被选中的构件会透明化。鼠标拖动盒子的面可以放大和缩小盒子。
<center>
image
</center>
构件透明功能
点击并调整滑动条上的数值，调整透明度，会将选中的构件的透明度进行修改。
<center>
image
</center>
构件隐藏功能
点击按钮会将选中的构件隐藏，使其不可见。（如果要恢复，通过还原的方式）
<center>
image
</center>
构件隔离功能
点击按钮会将选中的构件隔离，即只显示选中的构件，其他构件不可见。
<center>
image
</center>
模型剖切功能
第一次点击打开框选功能，第二次点击关闭框选功能。
剖切功能和框选功能类似，也是提供一个框体，位于框体之外的内容会被裁剪掉。。鼠标拖动盒子的面可以放大和缩小盒子。
<center>
image
</center>
模型分解功能
点击并调整滑动条上的数值，调整离散度，会将模型进行分解，达到炸裂的效果。分解的最小单位是构件级。离散系数为0时，不进行分解。
<center>
image
</center>
构件线框化功能
点击按钮会将选中的构件线框化，即用线来绘制构件。（如果要恢复，通过还原的方式）
<center>
image
</center>
构件材质修改
点击按钮，选取不同的颜色，被选中构件的颜色会随之变化。目前只支持颜色的修改。（如果要恢复，通过还原的方式）
<center>
image
</center>
设置功能
目前设置功能有两项，第一修改三维世界背景色、第二进入全屏模式。修改背景色和修改构件颜色的操作一致。
<center>
image
</center>
高级工具栏
高级工具栏中提供稍复杂一些的功能。
<center>
image
</center>
包括：
- 树结构显示（空间树、系统树、类型树、文件树）
- 属性显示（构件的属性）
- 搜索功能
- 测量功能
树结构
点击打开弹出窗，再次点击关闭弹出窗。
这个模块中包含了空间树、系统树、类型树、文件树这几种内容。
<center>
image
</center>
属性显示
点击打开弹出窗，再次点击关闭弹出窗。
这里会显示选中的构件的属性，如果选中了多个构件，那么只显示第一个构件的属性。
<center>
image
</center>
搜索
点击打开弹出窗，再次点击关闭弹出窗。
这里可以按指定的关键字来检索构件，检索范围包括构件的名称、类型、GUID和属性。默认显示缩略信息。点击更多显示完整信息。
<center>
image
</center>
测量
点击打开弹出窗，再次点击关闭弹出窗。
目前支持两点测量。测量结果包括两个点的位置，xyz方向的距离、直线距离。
<center>
image
</center>
显示模型
做了基本的了解之后，现在可以加载模型了，加载模型有两个接口，第一个是按文件加载，第二个是按构件id加载。
简单实用调用第一个接口就可以了。
- showModelByDocumentId
- showModelByComponentId
这里做一个简单示例:
vizbim.showModelByDocumentId("document/yjdoc-7232");
这样的一行代码就可以将一个三维模型显示出来了。"document/yjdoc-7232"是模型的id，这个id可以从蓝图中得到。
image
方法
这里主要讲一下常用方法的调用和参数。
模型加载
showModelByDocumentId方法的实现是在获取了和document有关的构件之后调用了showModelByComponentId方法。
showModelByDocumentId
顾名思义，这是通过文件id来显示模型的方法。四个参数分为是：
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| id | 模型文件的id | 字符串 string | 是 | "document/yjdoc-7232" |
| callback | 模型加载成功之后的回调函数 | 函数 function | 否 | function(){} |
| number | 每次加载的构件的数量 | 整型数字 number | 否 | 30 |
| level | 加载的构件的精细程度 | 字符串 string | 否 | "Level1" |
调用方式：
vizbim.showModelByDocumentId("document/yjdoc-7232",function(){console.log("加载完成");},30,undefined);
showModelByComponentId
这是通过构件的id来显示模型的方法。四个参数分为是：
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| id | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
| callback | 模型加载成功之后的回调函数 | 函数 function | 否 | function(){} |
| number | 每次加载的构件的数量 | 整型数字 number | 否 | 30 |
| level | 加载的构件的精细程度 | 字符串 string | 否 | "Level1" |
调用方式：
vizbim.showModelByComponentId(["123","456"],function(){console.log("加载完成");},30,undefined);
对构件的操作
transparentObjs ( nodes Degree setColor )
closeTransparentObjs ( nodes )
showObjs 显示构件
将给定的构件设置为可见。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.showObjs(["123","456"]);
hideObjs 隐藏构件
将给定的构件设置为不可见。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.hideObjs(["123","456"]);
isolationObjs 隔离构件
将给定的构件设置为可见，其他的构件隐藏。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.isolationObjs(["123","456"]);
transparentObjs 透明构件
将给定的构件的透明度设置相应的值。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
| Degree | 要设置的透明度 | 数字 number (0--1) | 否(默认0.5) | 0.8 |
| setColor | 是否将选中的构件颜色设置为灰色 | 布尔值 Boolean | 否(默认否) | true |
调用方式：
vizbim.transparentObjs(["123","456"],0.8,true);
closeTransparentObjs 关闭构件透明
将给定的构件的透明度设置为初始值。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 否(默认将所有构件的透明度设置为初始值) | ["123","456"] |
调用方式：
vizbim.closeTransparentObjs(["123","456"]);
reverseTransparentObjs 显示构件
将给定的构件之外的其他构件的透明度设置相应的值。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
| Degree | 要设置的透明度 | 数字 number (0--1) | 否(默认0.5) | 0.8 |
| setColor | 是否将选中的构件颜色设置为灰色 | 布尔值 Boolean | 否(默认否) | true |
调用方式：
vizbim.reverseTransparentObjs(["123","456"],0.8,true);
highlightObjs 高亮显示构件
将给定的构件设置为高亮。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.highlightObjs(["123","456"]);
closeHighlightObjs 关闭高亮显示构件
将给定的构件的高亮状态设置为关闭。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.closeHighlightObjs(["123","456"]);
wireframeObjs 线框显示构件
将给定的构件设置为线框模式。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.wireframeObjs(["123","456"]);
closeWireframeObjs 关闭线框显示构件
将给定的构件的线框模式设置为关闭。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.closeWireframeObjs(["123","456"]);
destroyObjs 销毁构件
将给定的构件销毁、从内存中移除。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.destroyObjs(["123","456"]);
findSceneNodes 定位并高亮构件
将给定的构件设置为高亮，并将视角飞跃到选定的构件。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
调用方式：
vizbim.findSceneNodes(["123","456"]);
setObjtColor 修改构件颜色
将给定的构件的颜色设置为给定的数值。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 是 | ["123","456"] |
| colors | 颜色数组 | 数组 array (0--1) | 是 | [0.5,0.6,0.7] |
调用方式：
vizbim.setObjtColor(["123","456"],[0.5,0.6,0.7]);
restoreObjtColor 恢复构件颜色
将给定的构件的颜色设置为初始值。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| nodes | 构件的id组成的数组 | 数组 array | 否(默认恢复所有构件的颜色) | ["123","456"] |
调用方式：
vizbim.restoreObjtColor(["123","456"]);
模型快照相关
setModelSnapshoot ( componentState, camaraState, cuttingState )
getModelPhoto 获取快照图片
将当前的模型状态以图片的方式保存。返回结果imgURL是base64格式的图片，height是图片高度，width是图片宽度
| 返回值说明 | 类型 | 示例 |
|---|---|---|
| 快照图片信息 | 对象 object | {imgURL:"123.png",height:100,width:100} |
调用方式：
var photo=vizbim.getModelPhoto();
getModelSnapshoot 获取快照
将当前的模型状态以对象的形式返回。返回结果componentState是构件的状态，camaraState是相机的状态，cuttingState是剖切的状态
| 返回值说明 | 类型 | 示例 |
|---|---|---|
| 快照信息 | 对象 object | {componentState: [],camaraState: {},cuttingState: {}} |
调用方式：
var Snapshoot=vizbim.getModelSnapshoot();
setModelSnapshoot 还原快照
将原来保存的快照还原。
| 名称 | 说明 | 类型 | 是否必须 | 示例 |
|---|---|---|---|---|
| componentState | 构件的状态 | 数组 array | 是 | [{ oid: "123",highlight: fasle, active: true,material: [0.1,0.2,0.3]}] |
| camaraState | 相机的状态 | 对象 object | 是 | {eye: {x:1,y:1,z:1},look: {x:1,y:1,z:1},up: {x:0,y:0,z:1},zoom: 1} |
| cuttingState | 剖切的状态 | 对象 object | 是 | {x:1,y:1,z:1,z1:1,y1:1,z1:1} |
调用方式：
vizbim.setModelPhoto([{ oid: "123",highlight: fasle, active: true,material: [0.1,0.2,0.3]}],{eye: {x:1,y:1,z:1},look: {x:1,y:1,z:1},up: {x:0,y:0,z:1},zoom: 1},{x:1,y:1,z:1,z1:1,y1:1,z1:1});
网友评论