npm - @belife/belife-bim-air - Versions diffs - 1.6.1-zy.86.patch.8 → 1.6.1-zy.86.patch.9 - Mend

@belife/belife-bim-air 1.6.1-zy.86.patch.8 → 1.6.1-zy.86.patch.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (369) hide show

package/docs//345/277/253/351/200/237/344/270/212/346/211/213.md ADDED Viewed

@@ -0,0 +1,139 @@
+# 快速上手
+## 安装
+### NPM
+```
+# 最新稳定版
+$ npm install gs-bim-air
+```
+#### 添加静态资源
+从 gs-bim-air 安装包里复的 public 文件夹复制 js 文件夹到 Vue 项目的静态资源目录（通常为 public 目录），复制后路径为：
+> public\js\fonts\微软雅黑.ttf
+>
+> public\js\longan\longan.js
+> public\js\longan\longan.wasm
+> public\js\longan\longan.worker.js
+>
+> public\js\longanWithoutShareArrayBuffer\longan.js
+> public\js\longanWithoutShareArrayBuffer\longan.wasm
+>
+> public\js\lzma\lzma.js
+> public\js\lzma\lzma.shim.js
+> public\js\lzma\lzmap.js
+> public\js\lzma\pwlzma.js
+> public\js\lzma\wlzma.js
+> public\js\lzma\wlzma.wrk.js
+#### vue 用法
+```html
+<template>
+  <div id="app">
+    <div id="viewerWrapper">
+      <viewer-wrapper elementId="viewer"></viewer-wrapper>
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from "vue";
+  import BimAir from "gs-bim-air";
+  import "gs-bim-air/lib/BimAir.css";
+  Vue.use(BimAir.ViewerWrapper);
+  export default {
+    name: "App",
+    components: {},
+    methods: {},
+    mounted() {
+      let options = {
+        elementId: "viewer",
+        modelService: "https://static.graphicstone.com/modelApi",
+        fileService: "https://static.graphicstone.com/fileApi",
+      };
+      BimAir.Loader().then(() => {
+        let viewer = new BimAir.Viewer(options);
+        viewer.loadModels(["6253e9d6b0545a0a6e49bf85"]).then(() => {
+          viewer.fitWorld();
+        });
+      });
+    },
+  };
+</script>
+<style>
+  #app {
+    margin: 0;
+    padding: 0;
+    height: 100vh;
+  }
+  #viewerWrapper {
+    height: 100vh;
+  }
+</style>
+```
+### 直接用 &lt;script&gt; 引入
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>引入BimAir</title>
+    <link
+      rel="stylesheet"
+      href="https://static.graphicstone.com/bimAir/BimAir.css"
+    />
+    <script src="https://static.graphicstone.com/vue.min.js"></script>
+    <script src="https://static.graphicstone.com/bimAir/BimAir.umd.min.js"></script>
+  </head>
+  <body>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+        height: 100vh;
+      }
+      #app {
+        height: 100vh;
+        position: relative;
+      }
+    </style>
+    <div id="app">
+      <viewer-wrapper elementId="viewer" style="height: 100%; width: 100%" />
+    </div>
+    <script type="text/javascript">
+      new Vue({
+        el: "#app",
+      });
+      let options = {
+        elementId: "viewer",
+        modelService: "https://static.graphicstone.com/modelApi",
+        fileService: "https://static.graphicstone.com/fileApi",
+      };
+      BimAir.Loader({ url: "https://static.graphicstone.com/bimAir" }).then(
+        () => {
+          let viewer = new BimAir.Viewer(options);
+          let modelId = "624fff10aba44c07ef4b184e";
+          viewer.loadModels(["624fff10aba44c07ef4b184e"]);
+          viewer.fitWorld();
+        }
+      );
+    </script>
+  </body>
+</html>
+```

package/docs//346/250/241/345/236/213/344/272/244/344/272/222//344/272/213/344/273/266/347/233/221/345/220/254.md ADDED Viewed

@@ -0,0 +1,70 @@
+# 事件监听
+本框架事件监听主要分三类，分别是鼠标事件、键盘事件、触摸屏事件
+## 鼠标事件
+监听鼠标点击移动滚动等事件，使用方式如下：
+```js
+viewer.onLButtonUp.add((sender, event) => {
+  console.log("鼠标左键松开");
+});
+viewer.onRButtonDown.add((sender, event) => {
+  console.log("鼠标右键按下");
+});
+viewer.onMouseWheel.add((sender, event) => {
+  console.log("鼠标滚动");
+});
+viewer.onMouseMove.add((sender, event) => {
+  console.log("鼠标移动");
+});
+```
+## 键盘事件
+监听键盘长按、按下、松开等事件，使用方式如下：
+```js
+viewer.windowKeyDown.add((sender, event) => {
+   if ((e.uiEvent as any).key === "Delete") {
+        console.log("键盘按下Delete键");
+   }
+});
+viewer.onWindowKeyPress.add((sender, event) => {
+   if ((e.uiEvent as any).key === "Delete") {
+        console.log("键盘长按Delete键");
+   }
+});
+viewer.onWindowKeyUp.add((sender, event) => {
+   if ((e.uiEvent as any).key === "Delete") {
+        console.log("键盘松开Delete键");
+   }
+});
+```
+## 触摸屏事件
+监听移动端触摸屏的事件，使用方式如下：
+```js
+viewer.onTouchStart.add((sender, event) => {
+  console.log("触摸开始");
+});
+viewer.onTouchMove.add((sender, event) => {
+  console.log("触摸移动");
+});
+viewer.onTouchEnd.add((sender, event) => {
+  console.log("触摸结束");
+});
+```
+更多事件请查看[Viewer](../classes/Viewer.md)

package/docs//346/250/241/345/236/213/344/272/244/344/272/222//350/247/206/345/233/276/350/256/276/347/275/256.md ADDED Viewed

@@ -0,0 +1,25 @@
+# 视图设置
+Viewer 的视图操作可以通过 setViewMode 函数进行。
+## 视图模式
+Viewer 的 setViewMode 函数可以设置 Viewer 的场景视图。
+```js
+viewer.setViewMode(BimAir.Longan.ViewMode.Iso, true);
+```
+其中第一个参数是视图的设置类型，等轴设置是 BimAir.Longan.ViewMode.Iso，可用类型为：
+第二个参数是对视图进行设置时是否进行 Fit World 操作，也就是把模型居中显示。
+其他视图模式请查看[BimAir.Longan.ViewMode](../enums/Longan.LonganCore.ViewMode.md)
+### 模型居中
+通过 Viewer 的 fitWorld 函数可以把模型进行视图居中。
+```js
+viewer.fitWorld();
+```

package/docs//346/250/241/345/236/213/344/272/244/344/272/222//351/200/211/346/213/251/347/256/241/347/220/206/345/231/250.md ADDED Viewed

@@ -0,0 +1,42 @@
+# 选择管理器
+在 Viewer 里进行构件选择操作，可以通过[viewer.selectionManager](..\classes\SelectionManager.md)对场景中的构件进行选择操作。
+通过点击鼠标左键进行构件选择，选择中的构件会以半透明蓝色显示,若需要多选，则按住 Ctrl 后左键点击。
+## 获取选中构件
+获取单个和多个选中构件
+```js
+// 单个
+let segmentObject = viewer.selectionManager.segmentObject;
+// 多个
+let segmentObjects = viewer.selectionManager.segmentObjects;
+```
+## 获取点中的坐标
+```js
+let selectedPos = viewer.selectionManager.selectedPos;
+```
+## 添加处理事件
+可以在 ComponentSelector 添加事件处理选中的构件，由于需要区分单构件选择和多构件框选，lButtonDown 的时候还未能确定选中的对象，所以需要在 lButtonUp 监听事件
+```js
+BimAir.ComponentSelector.lButtonUp.add((sender, event) => {
+  console.log("选中构件：", viewer.selectionManager.segmentObject);
+});
+```
+## 选中且高亮构件
+传入构件对象或者结构树节点数组
+[viewer.selectionManager.selectAndHighlight](..\classes\SelectionManager.md#selectandhighlight)
+## 取消构件选中和高亮
+传入构件对象或者结构树节点数组
+[viewer.selectionManager.clearallselectionandhighlight](..\classes\SelectionManager.md#clearallselectionandhighlight)

package/docs//347/256/200/344/273/213.md ADDED Viewed

@@ -0,0 +1,41 @@
+# 轻量化云平台简介
+轻量化云平台是基于云的 BIM 模型轻量化管理及应用平台，它由模型轻量化转换工具，基于 WebGL 的三维显示引擎和平台开发功能包组成。
+## 平台架构
+<center>
+```mermaid
+graph LR
+subgraph 模型转换
+        n1("BIM模型(rvt、CATPart,dgn,IFC)") --> n2("模型轻量化引擎") --> n3("BIM轻量化模型(gsl)")
+    end
+```
+<font size=10>**↓**</font>
+```mermaid
+graph LR
+subgraph 文件管理
+        n4("ModelCloud云服务平台")
+    end
+```
+<font size=10>↓</font>
+```mermaid
+graph LR
+subgraph 模型绘制
+        n5("Longan绘制引擎(Web版，基于WebGL)")
+    end
+```
+</center>
+## 开发环境
+轻量化云平台的 API 主要分两类：<br/> 1.基于前端开发的 JS API，并提供 Type Script 声明文件以方便进行基于 TS 的开发。<br/> 2.基于服务器端的 Web API。<br/>

package/docs//347/273/223/346/236/204/346/240/221/344/270/216/346/236/204/344/273/266//346/236/204/344/273/266/345/256/232/344/275/215/343/200/201/345/261/236/346/200/247/346/230/276/347/244/272.md ADDED Viewed

@@ -0,0 +1,27 @@
+# 构件定位、属性显示
+## 构件定位
+可使视图聚焦到构件，详细用法请看 [viewer.locateObject](../classes/Viewer.md#locateobject)
+```js
+viewer.locateObject(treeNodeObject);
+```
+## 属性显示
+在 Viewer 里进行除了可以进行基于对象选择操作外，还可以进行基于构件的选择操作。
+### 添加处理事件
+可以在 ComponentSelector 添加事件处理选中的构件，由于需要区分单构件选择和多构件框选，lButtonDown 的时候还未能确定选中的对象，所以需要在 lButtonUp 监听事件
+```js
+BimAir.ComponentSelector.lButtonUp.add((sender, event) => {
+  let segmentObject = viewer.selectionManager.segmentObject;
+  viewer.propertyManager.getProperty(segmentObject).then((properties) => {
+    console.log("属性", properties);
+  });
+});
+```

package/docs//347/273/223/346/236/204/346/240/221/344/270/216/346/236/204/344/273/266//346/236/204/344/273/266/346/240/267/345/274/217/350/256/276/347/275/256.md ADDED Viewed

@@ -0,0 +1,74 @@
+# 构件样式设置
+## 设置构件颜色
+创建一个材质 Material，设置材质的颜色，把材质赋给构件的 segmentObject
+```js
+let material = new BimAir.Material(viewer, "setColor");
+material.setColor(255, 0, 0, 1); //rgb的值是0~255，a的值是0~1
+let seg = treeNodeObject.segmentObject;
+seg.setMaterial(material);
+this.viewer.updateDisplay();
+```
+## 设置构件透明度
+创建一个材质 Material，设置材质的透明度，把材质赋给构件的 segmentObject
+```js
+let material = new BimAir.Material(viewer, "setTransparency");
+material.setTransparency(0.5); // 传0~1
+let seg = treeNodeObject.segmentObject;
+seg.setMaterial(material);
+this.viewer.updateDisplay();
+```
+## 设置构件自发光
+创建一个材质 Material，设置材质的自发光，把材质赋给构件的 segmentObject
+```js
+let material = new BimAir.Material(viewer, "setEmissive");
+material.setEmissive(255, 0, 0, 0.5);
+let seg = treeNodeObject.segmentObject;
+seg.setMaterial(material);
+this.viewer.updateDisplay();
+```
+## 设置构件浮起
+创建一个材质 Material，设置材质的浮起，把材质赋给构件的 segmentObject
+```js
+let material = new BimAir.Material(viewer, "setFloat");
+material.setFloat();
+let seg = treeNodeObject.segmentObject;
+seg.setMaterial(material);
+this.viewer.updateDisplay();
+```
+## 设置构件贴图
+创建一个材质 Material，设置材质的贴图，把材质赋给构件的 segmentObject
+```js
+let material = new BimAir.Material(viewer, "setImage");
+let imageFile = (this.$refs.upload as HTMLInputElement).files[0];
+material.setImageByFile("贴图",imageFile);
+let seg = treeNodeObject.segmentObject;
+seg.setMaterial(material);
+this.viewer.updateDisplay();
+```

package/docs//347/273/223/346/236/204/346/240/221/344/270/216/346/236/204/344/273/266//346/236/204/344/273/266/351/232/220/350/227/217/343/200/201/351/232/224/347/246/273/343/200/201/351/253/230/344/272/256.md ADDED Viewed

@@ -0,0 +1,83 @@
+# 构件隐藏、隔离、高亮
+## 设置构件隐藏
+通过隐藏管理器 [viewer.invisibleManager](../classes/InvisibleManager.md) 控制构件的隐藏显示
+### 隐藏构件
+```js
+let node = treeNodeObject;
+viewer.invisibleManager.invisible([node]);
+this.viewer.updateDisplay();
+```
+### 隐藏其他构件
+```js
+let node = treeNodeObject;
+viewer.invisibleManager.invisibleInvert([node]);
+this.viewer.updateDisplay();
+```
+### 取消构件隐藏
+```js
+viewer.invisibleManager.clearAllInvisible();
+this.viewer.updateDisplay();
+```
+## 设置构件隔离
+通过隔离管理器 [viewer.isolationManager](../classes/IsolationManager.md) 控制构件的隔离显示
+### 隔离构件
+```js
+let node = treeNodeObject;
+viewer.isolationManager.isolation([node]);
+this.viewer.updateDisplay();
+```
+### 隔离其他构件
+```js
+let node = treeNodeObject;
+viewer.isolationManager.isolationInvert([node]);
+this.viewer.updateDisplay();
+```
+### 取消构件隔离
+```js
+viewer.invisibleManager.clearAllIsolation();
+this.viewer.updateDisplay();
+```
+## 设置构件高亮
+通过高亮管理器 [viewer.highlightManager](../classes/HighlightManager.md) 控制构件的高亮
+### 高亮构件
+```js
+let node = treeNodeObject;
+viewer.highlightManager.highlight([node]);
+this.viewer.updateDisplay();
+```
+### 清除多个构件高亮
+```js
+let node = treeNodeObject;
+viewer.highlightManager.clearHighlight([node]);
+this.viewer.updateDisplay();
+```

package/docs//347/273/223/346/236/204/346/240/221/344/270/216/346/236/204/344/273/266//347/273/223/346/236/204/346/240/221.md ADDED Viewed

@@ -0,0 +1,6 @@
+# 结构树
+## 结构树管理器[StructureTreeManager](../classes/StructureTreeManager.md)
+结构树管理器可直接用`viewer.structureTreeManager`访问，`viewer.structureTreeManager.rootNode`即结构树根节点，可通过此节点访问整棵树。
+树的每个节点类型均为[TreeNodeObject](../classes/TreeNodeObject.md),详细属性请查看 API 文档。

package/docs//351/205/215/347/275/256/LoaderOptions.md ADDED Viewed

@@ -0,0 +1,29 @@
+# LoaderOptions
+### 创建 Loader 传入的配置
+### 示例代码
+```js
+let loaderOptions = {
+  /** 用户的唯一标识 */
+  key: "",
+  /** 用户的密钥 */
+  secret: "",
+  /** 用户服务Url */
+  userService: "",
+  /** 请求wasm文件的url */
+  url: "",
+  /** 是否启用ShareArrayBuffer */
+  isShareArrayBuffer: false,
+  /** 是否初始化内核数据库 */
+  isInitDataBase: false,
+  /** 三维文字配置 */
+  text: {
+    /** 是否加载文字包 */
+    isLoad: true,
+    /** 文字包路径数组 */
+    fonts: ["/js/fonts/微软雅黑.ttf"],
+  },
+},
+```