mx3d 2024.1.22 → 2024.6.4

package/components/App.d.ts

@@ -32,7 +32,7 @@ export declare class App {
         progress?: Function;
         complete?: Function;
         onError?: Function;
-    }): Promise<unknown>;
+    }): Promise<void>;
     isDefaultMutual: boolean;
     set defaultMutual(value: boolean);
     dispose(): void;

package/docs/README.md

@@ -0,0 +1,24 @@
+## mx3djs
+
+> 我搭世界场景操作 API 集合。
+
+## 概述
+
+mx3djs 可以快速将我搭世界场景嵌入自定义 web 程序中。并提供操作场景、模型的 js 方法，为用户提供简单、高效的二次开发环境。mx3djs 支持以 html 页面直接引用、nodejs + js、nodejs + typescript 等进行开发。
+
+查看[快速开始](/started/quickstart.md)了解详情。
+
+## 特性
+
+- 简单 针对行业话功能化制定 API，只需提供 JSON 数据即可生成对应功能效果
+- 高效 底层采用最高效、高兼容性 WEBGL 引擎，为用户提供流畅、酷炫 3D 项目
+
+## 示例
+
+可以查看 [案例广场](https://www.wodashijie.com/caseSquare) 来了解更多在使用 mx3djs 创建的 WEB 3D 项目。
+
+## 相关网站
+
+在[我搭世界](https://www.wodashijie.com)里可以创建 3D 场景。
+
+在[官网](https://www.gzmaijing.com)里可以查看公司信息.

package/docs/_sidebar.md

@@ -0,0 +1,29 @@
+- [介绍](/)
+
+- [快速开始](/started/quickstart)
+
+- [更新日志](/releases.md)
+
+- 基本教程
+
+  - [场景](/project/projectmgr.md)
+
+  - [环境](/started/environment.md)
+
+- [场景管理](/models/modelmgr.md)
+
+- [相机](/camera.md)
+
+- [对象](/models/model.md)
+- [事件](/models/event.md)
+
+- 功能插件
+
+  - [浮动图标](/gui/2D.md)
+  - [网格图标](/gui/3D.md)
+  - [云图](/heatMap/heatMap.md)
+  - [机柜设备](/cabinet/cabinet.md)
+  - [容量](/models/capacity.md)
+  - [设备连线](/models/line.md)
+  - [一些特效](/models/effect.md)
+  <!-- - [漫游](/gui/3D.md) -->

package/docs/cabinet/cabinet.md

@@ -0,0 +1,250 @@
+## 说明
+
+机柜除了包含[对象](/models/model.md)所列的方法及属性外、还具备以下属性及方法。最重要的就是生成机柜内设备。
+
+注：切换层级后柜内设备会被清除
+
+## 方法
+
+### 开机柜门
+
+```javascript
+/// <summary>
+/// 开机柜门
+/// </summary>
+obj.open()
+```
+
+### 关机柜门
+
+```javascript
+/// <summary>
+/// 关机柜门
+/// </summary>
+obj.close()
+```
+
+### 生成机柜内设备
+
+```javascript
+/// <summary>
+/// 生成机柜内设备
+/// </summary>
+//机柜内设备数据，详情看下表格
+var _data = [
+  {
+    id: '123456', //设备的编号
+    name: '测试设备1', //设备名称
+    uHeight: 4, //U高
+    color:"#00fdff",
+    uStart: 6, //起始U位
+    frontImgUrl: './cabinet/24_font.jpg', //前面图片
+    backImgUrl: './cabinet/24_back.jpg', //后面图片
+  },
+  {
+    id: '12345678',
+    name: '测试设备2',
+    uHeight: 2,
+    color:"#acacac",
+    uStart: 10,
+    frontImgUrl: './cabinet/43_font.jpg',
+    backImgUrl: './cabinet/43_back.jpg',
+  },
+]
+//根据自定义的机柜编号查找机柜对象
+let cab = app.project.findObjectByCustomNumber('lCOpwMnh8oBM')
+//通过数据，生成机柜内设备
+cab.loadRacks(_data)
+```
+
+##### 机柜内设备数据说明
+
+| 字段名称   | 数据类型 | 是否可为空 | 说明                                                     |
+| ---------- | -------- | ---------- | -------------------------------------------------------- |
+| id         | string   | 否         | 设备编号，唯一                                           |
+| name       | string   | 否         | 设备名称                                                 |
+| uHeight    | int      | 否         | 设备 u 高                                                |
+| color      | string   | 是         | 十六进制颜色字符串。设备body颜色，可为空，默认："#acacac"                                                |
+| uStart     | int      | 否         | 起始 u 位                                                |
+| frontImgUrl | string   | 是         | 设备前面照片，必须小于 300kb                             |
+| backImgUrl | string   | 是         | 设备后面照片，必须小于 300kb                             |
+| direction  | bool     | 是         | 设备朝向；朝向机柜正面还是反面；默认为 true（正面）      |
+| width      | float    | 是         | 宽度，单位米；可空，默认为自适应于机柜刻度尺宽度（0.45） |
+| depth      | float    | 是         | 深度，单位米；可空，默认为自适应于机柜刻度尺深度         |
+
+### 销毁机柜内设备
+
+```javascript
+/// <summary>
+/// 销毁机柜内设备
+/// </summary>
+cab.unloadRacks()
+```
+
+## 示例
+
+### 示例效果
+
+<div id="container" style="width: 100%;height: 500px;position: relative;">
+<div style="position: absolute;top: 20px;left: 20px;width: 120px;z-index: 5;" class="btn-group-vertical" role="group">
+  <button type="button" id="but_setFlash" class="btn btn-default">创建</button>
+  <button type="button" id="but_setTransparent" class="btn btn-default">销毁</button>
+  <button type="button" id="but_setOpaque" class="btn btn-default">开门</button>
+  <button type="button" id="but_hide" class="btn btn-default">关门</button>
+</div>
+</div>
+
+<script>
+   MX3D.accessToken = "0498A36E67B5ED17E7A7B23D0AC4ACB2E1D6DE1209A0C0894BA0B6973C606201DDCEF2EACFE268AB31FBE04616680A3F453EA85544AE248BA2B115141E029B13C3C90718BA0F15AE6A78BA9F3D70C41650FA4EDDC64D1DEFE5CBA2767EC3A52B347393871ACAC3FF01DF62EAF2F0AEB93578E90EB1F3B7B0793949E88BB4AF1EBB9AA0B0635B93738EC96287638F8716DD6FAC6087C8C8BE4F674F3853042BC60E391D9F5D54";
+   app = new MX3D.App({
+     container: document.getElementById("container")
+    });
+   app.load({
+        pk: "9a0b0f36-f283-49b5-b964-9a3bc630abda",
+        // isDefaultLevel:false,
+        progress: (_x) => { //加载进度
+          //console.log(_x)
+        },
+        complete:()=>{ ///加载完成
+          console.log("加载完成");
+          // console.log(app.Project.getSceneTree());
+        }
+  });
+
+  $("#but_setFlash").click(function(){
+//查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('gAWcz6wkdb0Q')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  console.log(_obj);
+  return //找不到机柜，则取消生成
+}
+var _data = [
+  {
+    id: _obj.id + '_1', //设备的编号
+    name: '测试设备1', //设备名称
+    uHeight: 4, //U高
+    color:"#00fdff",
+    uStart: 10, //起始U位
+    frontImgUrl: './cabinet/24_font.jpg', //前面图片
+    backImgUrl: './cabinet/24_back.jpg', //后面图片
+  },
+  {
+    id: _obj.id + '_2', //设备的编号
+    name: '测试设备2',
+    uHeight: 2,
+    uStart: 18,
+    frontImgUrl: './cabinet/43_font.jpg',
+    backImgUrl: './cabinet/43_back.jpg',
+  },
+]
+_obj.loadRacks(_data) //生成设备
+app.camera.flyToObject(_obj) //看向机柜正面
+  });
+
+  $("#but_setTransparent").click(function(){
+    //查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('gAWcz6wkdb0Q')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.unloadRacks() //销毁
+  });
+
+  $("#but_setOpaque").click(function(){
+ //查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('gAWcz6wkdb0Q')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.open();
+  });
+
+  $("#but_hide").click(function(){
+   var _obj = app.project.findObjectByCustomNumber('gAWcz6wkdb0Q')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.close();
+  });
+</script>
+
+### 示例代码
+
+#### 创建
+
+```javascript
+/// <summary>
+/// 创建机柜内设备
+/// </summary>
+
+//查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('lCOpwMnh8oBM')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消生成
+}
+var _data = [
+  {
+    id: _obj.id + '_1', //设备的编号
+    name: '测试设备1', //设备名称
+    uHeight: 4, //U高
+    uStart: 10, //起始U位
+    frontImgUrl: './cabinet/24_font.jpg', //前面图片
+    backImgUrl: './cabinet/24_back.jpg', //后面图片
+  },
+  {
+    id: _obj.id + '_2', //设备的编号
+    name: '测试设备2',
+    uHeight: 2,
+    uStart: 18,
+    frontImgUrl: './cabinet/43_font.jpg',
+    backImgUrl: './cabinet/43_back.jpg',
+  },
+]
+_obj.loadRacks(_data) //生成设备
+app.camera.lookToTheFront(_obj) //看向机柜正面
+```
+
+#### 销毁
+
+```javascript
+/// <summary>
+/// 销毁机柜内设备
+/// </summary>
+
+//查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('lCOpwMnh8oBM')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.unloadRacks() //销毁
+```
+
+#### 开门
+
+```javascript
+/// <summary>
+/// 开机柜门
+/// </summary>
+
+//查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('lCOpwMnh8oBM')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.open()
+```
+
+#### 关门
+
+```javascript
+/// <summary>
+/// 关机柜门
+/// </summary>
+
+//查找指定自定义编号机柜
+var _obj = app.project.findObjectByCustomNumber('lCOpwMnh8oBM')
+if (_obj == null || _obj.objectType != 'Cabinet') {
+  return //找不到机柜，则取消
+}
+_obj.close()
+```

package/docs/camera.md

@@ -0,0 +1,109 @@
+## 正交俯视
+
+```javascript
+app.camera.orthographic()
+```
+
+## 3d 聚焦
+
+```javascript
+app.camera.perspective()
+```
+
+## 自动旋转
+
+```javascript
+//_autoRotationSpeed旋转速度，默认0.01，可为空；
+app.camera.startAutoRotation(_autoRotationSpeed?: number)
+```
+
+## 飞向物体
+
+```javascript
+//获取编号为：esdv974bvsQC物体；
+var obj = app.project.findObjectById('esdv974bvsQC')
+//相机飞向此物体
+app.camera.flyToObject(obj)
+```
+
+## 看向物体正面
+
+```javascript
+//获取编号为：esdv974bvsQC物体；
+var obj = app.project.findObjectById('esdv974bvsQC')
+//相机正面看向此物体
+app.camera.lookToTheFront(obj)
+```
+
+## 对象视角计算
+
+```javascript
+  /// <summary>
+  /// 计算指定对象数组的最佳视角
+  /// </summary>
+  /// <param name="_objs">对象数组</param>
+ let sight = app.project.computeSight(_objs: Array<IObject>);
+```
+
+### 获取当前画面视角
+
+#### 方式 1
+
+```javascript
+app.camera.getSightJson()
+```
+
+#### 方式 2
+
+在鼠标旋转到最佳视角时按键盘 F 键立即弹出视角参数
+
+### 示例
+
+<div id="container" style="width: 100%;height: 500px;position: relative;">
+<div style="position: absolute;top: 20px;left: 20px;width: 120px;z-index: 5;" class="btn-group-vertical" role="group">
+  <button type="button" id="but_orthographic" class="btn btn-default">正交俯视</button>
+  <button type="button" id="but_perspective" class="btn btn-default">3D聚焦</button>
+  <button type="button" id="but_flyTo" class="btn btn-default">飞向</button>
+  <button type="button" id="but_lookToTheFront" class="btn btn-default">看向物体正面</button>
+  
+  <!-- <button type="button" id="but_pfs" class="btn btn-default">漫游</button> -->
+</div>
+</div>
+
+<script>
+   MX3D.accessToken = "0498A36E67B5ED17E7A7B23D0AC4ACB2E1D6DE1209A0C0894BA0B6973C606201DDCEF2EACFE268AB31FBE04616680A3F453EA85544AE248BA2B115141E029B13C3C90718BA0F15AE6A78BA9F3D70C41650FA4EDDC64D1DEFE5CBA2767EC3A52B347393871ACAC3FF01DF62EAF2F0AEB93578E90EB1F3B7B0793949E88BB4AF1EBB9AA0B0635B93738EC96287638F8716DD6FAC6087C8C8BE4F674F3853042BC60E391D9F5D54";
+   app = new MX3D.App({
+     container: document.getElementById("container"),
+    });
+   app.load({
+        pk: "9a0b0f36-f283-49b5-b964-9a3bc630abda",
+        // isDefaultLevel:false,
+        progress: (_x) => { //加载进度
+          console.log(_x)
+        },
+        complete:()=>{ ///加载完成
+          console.log("加载完成");
+          // console.log(app.Project.getSceneTree());
+          // app.Project.switchLevel("LpdpkdkclhBU",true,true);
+          //console.log(parseInt(new Date().getTime() - _t) / 1000);
+        }
+  });
+
+  $("#but_perspective").click(function(){
+      app.camera.perspective();
+  });
+
+  $("#but_orthographic").click(function(){
+     app.camera.orthographic();
+  });
+
+  $("#but_flyTo").click(function(){
+    var obj = app.project.findObjectById("NF4fRbneFqnn")
+     app.camera.flyToObject(obj);
+  });
+
+  $("#but_lookToTheFront").click(function(){
+    var obj = app.project.findObjectById("NF4fRbneFqnn")
+     app.camera.lookToTheFront(obj);
+  });
+</script>