2018-09-29

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文件中。

这是一段示例：

需要在你的html文件中添加一个div元素，用来承放三维世界。你需要为这个div指定一个id，这个id在接下来的使用中用到。

这是一段示例：

现在你可以创建三维世界的框架了。

首先你需要配置一些参数：（蓝图版）

• 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

你会发现页面上除了一个小方块和两个工具条什么都没有。不用担心，在了解了页面上的布置之后就会进行模型的加载。

页面布置介绍

视图控制器

位于页面左上方的小方块被称为视图控制器。点击小方块上不同的面、角、棱会将模型转换到不同的视角。鼠标移动到相应的位置会有颜色提示。

image

基础工具栏

用户的基础操作都在这个区域，主要包含了对相机的控制，对构件的控制，以及一些其他小功能。

image

从左到右的功能依次为：

复位

将模型恢复到初始状态，包括相机的位置，观察点、构件的状态等。

image

位置自适应

将选中的构件或模型整体按当前视角移动的屏幕中合适的位置

image

还原

将模型的状态按照选定的方法还原为初始状态。
分别有：

• 构件可见性
• 构件高亮
• 构件透明
• 构件线框化
• 构件颜色
• 模型视角

image

漫游

第一次点击打开漫游功能，第二次点击关闭漫游功能。

漫游功能为以第一人称的视角在模型内移动，可以模拟人体的移动和身体的旋转。

image

框选功能

第一次点击打开框选功能，第二次点击关闭框选功能。

框选功能是提供一个框体，位于框体之内的构件会被选中并高亮，未被选中的构件会透明化。鼠标拖动盒子的面可以放大和缩小盒子。

image

构件透明功能

点击并调整滑动条上的数值，调整透明度，会将选中的构件的透明度进行修改。

image

构件隐藏功能

点击按钮会将选中的构件隐藏，使其不可见。（如果要恢复，通过还原的方式）

image

构件隔离功能

点击按钮会将选中的构件隔离，即只显示选中的构件，其他构件不可见。

image

模型剖切功能

第一次点击打开框选功能，第二次点击关闭框选功能。

剖切功能和框选功能类似，也是提供一个框体，位于框体之外的内容会被裁剪掉。。鼠标拖动盒子的面可以放大和缩小盒子。

image

模型分解功能

点击并调整滑动条上的数值，调整离散度，会将模型进行分解，达到炸裂的效果。分解的最小单位是构件级。离散系数为0时，不进行分解。

image

构件线框化功能

点击按钮会将选中的构件线框化，即用线来绘制构件。（如果要恢复，通过还原的方式）

image

构件材质修改

点击按钮，选取不同的颜色，被选中构件的颜色会随之变化。目前只支持颜色的修改。（如果要恢复，通过还原的方式）

image

设置功能

目前设置功能有两项，第一修改三维世界背景色、第二进入全屏模式。修改背景色和修改构件颜色的操作一致。

image

高级工具栏

高级工具栏中提供稍复杂一些的功能。

image

包括：

• 树结构显示（空间树、系统树、类型树、文件树）
• 属性显示（构件的属性）
• 搜索功能
• 测量功能

树结构

点击打开弹出窗，再次点击关闭弹出窗。

这个模块中包含了空间树、系统树、类型树、文件树这几种内容。

image

属性显示

点击打开弹出窗，再次点击关闭弹出窗。

这里会显示选中的构件的属性，如果选中了多个构件，那么只显示第一个构件的属性。

image

搜索

点击打开弹出窗，再次点击关闭弹出窗。

这里可以按指定的关键字来检索构件，检索范围包括构件的名称、类型、GUID和属性。默认显示缩略信息。点击更多显示完整信息。

image

测量

点击打开弹出窗，再次点击关闭弹出窗。

目前支持两点测量。测量结果包括两个点的位置，xyz方向的距离、直线距离。

image

显示模型

做了基本的了解之后，现在可以加载模型了，加载模型有两个接口，第一个是按文件加载，第二个是按构件id加载。
简单实用调用第一个接口就可以了。

• showModelByDocumentId
• showModelByComponentId

这里做一个简单示例:
​
vizbim.showModelByDocumentId("document/yjdoc-7232");

这样的一行代码就可以将一个三维模型显示出来了。"document/yjdoc-7232"是模型的id，这个id可以从蓝图中得到。

image

方法

这里主要讲一下常用方法的调用和参数。

模型加载

showModelByDocumentId ( id callback number level )

showModelByComponentId ( id callback number level )

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);

对构件的操作

showObjs ( nodes )

hideObjs ( nodes )

isolationObjs ( nodes )

transparentObjs ( nodes Degree setColor )

closeTransparentObjs ( nodes )

reverseTransparentObjs ( nodes Degree setColor )

highlightObjs ( nodes )

closeHighlightObjs ( nodes )

wireframeObjs ( nodes )

closeWireframeObjs ( nodes )

destroyObjs ( nodes )

findSceneNodes ( nodes )

setObjtColor ( nodes, colors)

restoreObjtColor ( 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"]);

模型快照相关

getModelPhoto ( )

getModelSnapshoot ( )

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});