@xtctwins/tctwins-bimx-viewer 1.0.8 → 1.1.0

package/README.md

@@ -0,0 +1,137 @@
+# @xtctwins/tctwins-bimx-viewer
+
+# xtc 三维文件查看器
+
+# 安装
+
+```ssh
+// 安装依赖
+npm i @xtctwins/tctwins-bimx-viewer
+```
+
+# Example
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0" />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+      }
+      #myViewer {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        align-items: stretch;
+        z-index: 10000;
+        position: absolute;
+        background: linear-gradient(180deg, #fffefb 0%, #daebff 100%);
+        transition: all 300ms ease-in-out;
+      }
+      #myCanvas {
+        width: 100%;
+        height: 100%;
+        cursor: default;
+        pointer-events: all;
+        position: relative;
+      }
+      #myNavCubeCanvas {
+        width: 200px;
+        height: 200px;
+        position: absolute;
+        bottom: 0;
+        right: 0;
+        z-index: 200000;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="myViewer">
+      <canvas id="myCanvas"></canvas>
+      <canvas id="myNavCubeCanvas"></canvas>
+    </div>
+  </body>
+</html>
+<script type="module">
+  import { BIMXViewer } from "@xtctwins/tctwins-bimx-viewer";
+
+  let modelId = "model1";
+  let modelArrayBuffer;
+  let filePath = `https://bimkk-oss-test.oss-cn-beijing.aliyuncs.com/test/1公寓幕墙.xtc`;
+
+  //引擎初始化
+  let bimViewer = new BIMXViewer({
+    canvasElement: document.getElementById("myCanvas"),
+    viewerElement: document.getElementById("myViewer"),
+    navCubeCanvasElement: document.getElementById("myNavCubeCanvas"),
+    viewer_cfg:{
+      antialias: true,
+      transparent: true,
+      edgesEnabled: true,
+      premultipliedAlpha: true
+    };
+  });
+
+  //获取模型文件
+  fetch(filePath)
+    .then((response) => response.arrayBuffer())
+    .then((data) => {
+      modelArrayBuffer = data;
+      loadModel();
+    })
+    .catch((error) => console.error("获取文件时出错:", error));
+
+  const loadModel = ()=>{
+    let startTime = new Date().getTime();
+    //载入模型
+    bimViewer.loadModel(
+      modelId,
+      modelArrayBuffer,
+      () => {
+        console.log(path + "模型加载完成！", bimViewer);
+        window.bimViewer = bimViewer;
+      },
+      () => {
+        console.log(path + "加载失败！");
+      },
+      { modelType }
+    );
+
+    //模型加载完毕监听
+    bimViewer.modelsExplorer.on("modelLoaded", () => {
+      let endTime = new Date().getTime();
+      let executionTime = endTime - startTime;
+      console.log("加载时长: " + executionTime / 1000 + " s");
+    });
+  }
+</script>
+```
+
+## 其他方法
+
+```js
+//禁止点击聚焦效果
+bimViewer.disableClickEvent = true;
+
+//边缘显示
+bimViewer.setEdgesEnabled();
+
+//重置相机视角
+bimViewer.resetView();
+...
+```
+
+## 事件
+
+```js
+//单击构件
+bimViewer.eventTrigger.on("pickedEntity", (entity) => {});
+//点击空白
+bimViewer.eventTrigger.on("pickedNothing", () => {});
+```