BIMWIN Core

BIMWIN 核心库, 使用 typescript 开发, 非 LOD 版本

查看更新日志

[toc]

安装

``npm i bimwin-api`

`开始`

初始化

`js import { Platform } from "bimwin-api";

let fileId = "48c6514d7a8245839b6dd0dc8cb89d23"; let host = "http://172.18.1.72:9983/";

let options = { // 全局配置项 el: "app", // 挂载点 url: host, // 主机地址 secret: { token: "0e8d286ecfa84f01a97c7733b8aeb4a2dt3xrlvrghl", loginMark: "6Iqx6Ze05LiA5aO26YWS77yM54us6YWM5peg55u45Lqy", }, };

let platform = new Platform(options);

platform.Service.GetFileBimType(fileId, (type) => { options.type = type; platform.Init();

platform.Model.LoadModel( fileId, () => console.log("loaded"), () => console.log("loading"), () => console.log("loading ", performance.memory.usedJSHeapSize) ); });`

得到核心引用platform以下示例代码中的顶级引用均指代于此.

对于bimwin而言会导出以下对象, 其中platform为核心对象. THREE为threejs核心对象

`js export { Platform, Element, Model, Label, Service, Util, THREE };`

如果是通过浏览器script标签引入的话, 库的唯一标识为bw, 通过window.bw或者bw可以调用

`状态设置`

以下 API 均是设置一种状态全局存在的

`线框显示/隐藏`

`js platform.bimwin.setLineIsHide(((value: boolean) = true));`

`鼠标悬停显示轮廓`

`js platform.bimwin.outlineNode.SetEnable(((value: boolean) = false));`

`场景亮度调节`

`js // value 范围 [0, 1.0] 0为全黑，0.5为正常，1.0为全亮 platform.bimwin.SetIntensity(value: number)`

`鼠标 WASDQE 速度微调`

即使没有进入漫游模式也可以使用 WASDQE 微调角度

`js // value 推荐范围在[1, 16] 可以设置任意值可以突破16 platform.bimwin.setSpeed(value: number)`

`平行光投影`

投放平行光使模型产生阴影, 可以提高真实度, 但会降低性能

`js platform.bimwin.StartUsingShadow(value: boolean)`

`设置背景`

首先存在三种背景色的设置, 分别是

- 1.天空盒背景, 需要六张图片作为背景 - 2.webgl 的场景色 - 3.html canvas 的背景色

`$3`

`js // urls 使用前后上下左右的顺序依次写入图片地址 platform.bimwin.setDefaultSkyBox(urls: string[])`

`$3`

`js // color支持html hex字符串和纯数字 platform.bimwin.setSceneBackgroundColor(color: number|string)`

`$3`

`js platform.bimwin.canvas.style.backgroundColor = "red";`

`$3`

可以设置[禁用,单选,多选], 但是可能会被其他业务覆盖, 比如测量时会将点选模式强制设置为单选.

`js platform.bimwin.setSelectMode(str: 'nochoice'|'singlechoice'|'multiplechoice')`

`构件`

`获取构件数据`

通过监听属性加载完毕事件(OnPropertyLoaded), 返回的props参数存在以下值

`{ FileId: '', OriginIds: {}, Props: {}, // 属性 Tree: {} // 目录树结构 }`

`js platform.BwEvent.OnPropertyLoaded.add((props) => { // 通过props.Tree获取目录树结构 });`

`聚焦构件`

`js /** * 聚焦构件 * @param ids 构件集合 * @param isHighlight 是否高亮 * @param ratio 放大率[0.0 - 1.0]，0.5标准 */ platform.Element.FitElements(ids: string[], isHighlight: boolean, ratio: number = 0.5)`

`隐藏/显示构件`

主要的方法如下：

`js // state 状态值 [隐藏:-1] [高亮:0] [材质:1] [半透明:2] [着色:3] platform.bimwin.setNodesState(ids: string[], state: number)`

隐藏/显示所有构件有如下方法:

`js platform.bimwin.setAllNodesState(state: number)`

所以实现显示单个构件隐藏其他构件可以这么做：

`js platform.bimwin.setAllNodesState(-1); platform.bimwin.setNodesState(["这是构件id"], 1);`

`构件上色`

通用上色方法

`js platform.bimwin.SetNodesColorAndOpacity(ids: string[], color: string | number, opacity = 1.0, closeDepthTest = false)`

closeDepthTest如果true即使构件被遮挡也能看到构件。

闪烁构件方法`js platform.bimwin.SetNodesBlink(ids: string[] | string, color: number | string, speed = 0.005, enable = true)`

通过调节speed来更改闪烁的幅度

`重置构件`

任何时候都可以通过setNodesState(['构件id'], 1)来回到初始普通构件的模样

`测量`

测量存在以下类型, 后面的 API 接口中的measurementType均是指代于此

`js export enum measurementType { 'DISTANCE' = 'distance', // 距离 'ANGLE' = 'Angle', // 角度 'ELEVATION' = 'elevation', // 标高 'VOLUME' = 'volume', // 体积 'TheMeasureOfArea' = 'TheMeasureOfArea' // 面积 }`

测量之前需要设置此次测量的类型, 如下

`js platform.bimwin.plugins.measureTool.changeType(type: measurementType)`

`开启测量`

`js platform.bimwin.startMeasure((cb, additional) => { // cb返回测量后的结果 additional 为测量的附加结果 console.log(cb, additional); });`

`终止测量`

一般来说测量开启时鼠标会进入捕获状态, 使用此方法可以在任何情况下终止测量动作

`js platform.bimwin.stopMeasure();`

`剖切`

`包围盒剖切`

开启只需要如下

`js platform.bimwin.showSectionBox(cb: Function)`

可以提供一个回调函数给cb, cb会返回以下参数

`js export interface SectionData { position: THREE.Vector3; size: THREE.Vector3; rotation: number; }`

主动调整xyz方向的数值

`js // value [number, number] platform.bimwin.plugins.sectionBox.bilateralAdjustSectionX(value[0], value[1]); platform.bimwin.plugins.sectionBox.bilateralAdjustSectionX(value[0], value[1]); platform.bimwin.plugins.sectionBox.bilateralAdjustSectionX(value[0], value[1]);`

显示/隐藏剖切盒

`js platform.bimwin.plugins.sectionBox.showOrHiddenSectionBox(visible: boolean)`

摧毁剖切盒

`js // keepSectionPlanes 是否保留剖切结果 platform.bimwin.plugins.sectionBox.close( ((keepSectionPlanes: boolean) = false) );`

`轴向剖切`

开启很简单

`js platform.bimwin.plugins.sectionBox.showAxialSectionBox();`

显示/隐藏剖切盒

`js platform.bimwin.plugins.sectionBox.showOrHiddenAxialBox(visible: boolean)`

摧毁剖切盒

`js platform.bimwin.plugins.sectionBox.closeAxialBox();`

更改轴向

`js platform.bimwin.plugins.sectionBox.changeAxialDir(dir: 'x'|'y'|'z')`

更改模式

`js platform.bimwin.plugins.sectionBox.setControlModel(str: 'rotate'|'translate')``

BIMWIN Core

BIMWIN 核心库, 使用 typescript 开发, 非 LOD 版本

查看更新日志

[toc]

安装

``npm i bimwin-api`

`开始`

初始化

`js import { Platform } from "bimwin-api";

let fileId = "48c6514d7a8245839b6dd0dc8cb89d23"; let host = "http://172.18.1.72:9983/";

let platform = new Platform(options);

platform.Service.GetFileBimType(fileId, (type) => { options.type = type; platform.Init();

platform.Model.LoadModel( fileId, () => console.log("loaded"), () => console.log("loading"), () => console.log("loading ", performance.memory.usedJSHeapSize) ); });`

得到核心引用platform以下示例代码中的顶级引用均指代于此.

对于bimwin而言会导出以下对象, 其中platform为核心对象. THREE为threejs核心对象

`js export { Platform, Element, Model, Label, Service, Util, THREE };`

如果是通过浏览器script标签引入的话, 库的唯一标识为bw, 通过window.bw或者bw可以调用

`状态设置`

以下 API 均是设置一种状态全局存在的

`线框显示/隐藏`

`js platform.bimwin.setLineIsHide(((value: boolean) = true));`

`鼠标悬停显示轮廓`

`js platform.bimwin.outlineNode.SetEnable(((value: boolean) = false));`

`场景亮度调节`

`js // value 范围 [0, 1.0] 0为全黑，0.5为正常，1.0为全亮 platform.bimwin.SetIntensity(value: number)`

`鼠标 WASDQE 速度微调`

即使没有进入漫游模式也可以使用 WASDQE 微调角度

`js // value 推荐范围在[1, 16] 可以设置任意值可以突破16 platform.bimwin.setSpeed(value: number)`

`平行光投影`

投放平行光使模型产生阴影, 可以提高真实度, 但会降低性能

`js platform.bimwin.StartUsingShadow(value: boolean)`

`设置背景`

首先存在三种背景色的设置, 分别是

- 1.天空盒背景, 需要六张图片作为背景 - 2.webgl 的场景色 - 3.html canvas 的背景色

`$3`

`js // urls 使用前后上下左右的顺序依次写入图片地址 platform.bimwin.setDefaultSkyBox(urls: string[])`

`$3`

`js // color支持html hex字符串和纯数字 platform.bimwin.setSceneBackgroundColor(color: number|string)`

`$3`

`js platform.bimwin.canvas.style.backgroundColor = "red";`

`$3`

可以设置[禁用,单选,多选], 但是可能会被其他业务覆盖, 比如测量时会将点选模式强制设置为单选.

`js platform.bimwin.setSelectMode(str: 'nochoice'|'singlechoice'|'multiplechoice')`

`构件`

`获取构件数据`

通过监听属性加载完毕事件(OnPropertyLoaded), 返回的props参数存在以下值

`{ FileId: '', OriginIds: {}, Props: {}, // 属性 Tree: {} // 目录树结构 }`

`js platform.BwEvent.OnPropertyLoaded.add((props) => { // 通过props.Tree获取目录树结构 });`

`聚焦构件`

`隐藏/显示构件`

主要的方法如下：

`js // state 状态值 [隐藏:-1] [高亮:0] [材质:1] [半透明:2] [着色:3] platform.bimwin.setNodesState(ids: string[], state: number)`

隐藏/显示所有构件有如下方法:

`js platform.bimwin.setAllNodesState(state: number)`

所以实现显示单个构件隐藏其他构件可以这么做：

`js platform.bimwin.setAllNodesState(-1); platform.bimwin.setNodesState(["这是构件id"], 1);`

`构件上色`

通用上色方法

`js platform.bimwin.SetNodesColorAndOpacity(ids: string[], color: string | number, opacity = 1.0, closeDepthTest = false)`

closeDepthTest如果true即使构件被遮挡也能看到构件。

闪烁构件方法`js platform.bimwin.SetNodesBlink(ids: string[] | string, color: number | string, speed = 0.005, enable = true)`

通过调节speed来更改闪烁的幅度

`重置构件`

任何时候都可以通过setNodesState(['构件id'], 1)来回到初始普通构件的模样

`测量`

测量存在以下类型, 后面的 API 接口中的measurementType均是指代于此

测量之前需要设置此次测量的类型, 如下

`js platform.bimwin.plugins.measureTool.changeType(type: measurementType)`

`开启测量`

`js platform.bimwin.startMeasure((cb, additional) => { // cb返回测量后的结果 additional 为测量的附加结果 console.log(cb, additional); });`

`终止测量`

一般来说测量开启时鼠标会进入捕获状态, 使用此方法可以在任何情况下终止测量动作

`js platform.bimwin.stopMeasure();`

`剖切`

`包围盒剖切`

开启只需要如下

`js platform.bimwin.showSectionBox(cb: Function)`

可以提供一个回调函数给cb, cb会返回以下参数

`js export interface SectionData { position: THREE.Vector3; size: THREE.Vector3; rotation: number; }`

主动调整xyz方向的数值

显示/隐藏剖切盒

`js platform.bimwin.plugins.sectionBox.showOrHiddenSectionBox(visible: boolean)`

摧毁剖切盒

`js // keepSectionPlanes 是否保留剖切结果 platform.bimwin.plugins.sectionBox.close( ((keepSectionPlanes: boolean) = false) );`

`轴向剖切`

开启很简单

`js platform.bimwin.plugins.sectionBox.showAxialSectionBox();`

显示/隐藏剖切盒

`js platform.bimwin.plugins.sectionBox.showOrHiddenAxialBox(visible: boolean)`

摧毁剖切盒

`js platform.bimwin.plugins.sectionBox.closeAxialBox();`

更改轴向

`js platform.bimwin.plugins.sectionBox.changeAxialDir(dir: 'x'|'y'|'z')`

更改模式

`js platform.bimwin.plugins.sectionBox.setControlModel(str: 'rotate'|'translate')``