mx3d 0.0.31 → 0.0.34

package/docs/models/modelmgr.md

@@ -0,0 +1,251 @@
+## 获取对象
+
+```javascript
+ /// <summary>
+  /// 全局查询
+  /// </summary>
+  /// <param name="_id">对象标识</param>
+  /// <param name="type">对象类型</param>
+  /// <param name="current">是否当前楼层</param>
+  query(_id?: string, type?: ObjectType, current?: boolean)
+```
+
+## 基础属性
+
+```javascript
+  id: string;//唯一id
+  name: string;//名称
+  objectType: string;//对象类型
+  isMonitor: boolean;//是否监听
+  parent: IObject;//父物体
+  children: ArrayEx<IObject>;//子物体
+  visible: boolean;//是否显示
+  visualAngle:VisualAngle;//视场角度
+  childNodes:Dictionary<BaseNode>;//附带物体
+  delete();//删除
+  dispose();//销毁
+  transparent: boolean;//是否透明
+  showBoundingBox: boolean;//显示边缘
+  setFlash(level:number)//设置闪烁
+  addEventListener(type: string, callback: Function);//添加对象事件
+  removeEventListener(type: string)//删除对象事件
+  play(isloop: boolean);//播放对象动画
+  stop();//暂停对象动画
+  flyTo();//相机飞向对象
+  focus();//聚焦当前
+  switch();//切换到当前
+```
+
+## 特殊对象属性
+
+### 暖气片
+
+```javascript
+airFlowDisplay((isDisplay: boolean = true)) //是否显示隐藏暖气片
+```
+
+## 事件
+
+addEventListener() 方法为指定对象指定事件处理程序。
+
+### 语法
+
+```javascript
+obj.addEventListener(event, function);
+```
+
+第一个参数是事件的类型（可选 "leftClick:左键点击" ， "rightClick:右键点击" ， "longPress:长按" ， "doubleClick:双击" ， "eover:经过" ， "out:移出"）。
+
+第二个参数是当事件发生时我们需要调用的函数。
+
+### 事件实例
+
+当用户左键点击某个对象时浏览器控制台输出此对象：
+
+```javascript
+obj.addEventListener(Mviot.EventType.leftClick, function(e) {
+  console.log(e)
+})
+```
+
+## 事件删除
+
+removeEventListener() 方法
+
+removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：
+
+### 实例
+
+```javascript
+obj.removeEventListener(Mviot.EventType.leftClick)
+```
+
+## 对象类型
+
+```javascript
+//引用方式
+Mviot.ObjectType.Cabinet
+```
+
+```javascript
+/// <summary>
+/// 园区
+/// </summary>
+Campus,
+  /// <summary>
+  /// 大楼
+  /// </summary>
+  Building,
+  /// <summary>
+  /// 楼层
+  /// </summary>
+  Scene,
+  /// <summary>
+  /// 温湿度
+  /// </summary>
+  Humiture,
+  /// <summary>
+  /// 电池
+  /// </summary>
+  Battery,
+  /// <summary>
+  /// 配电柜
+  /// </summary>
+  PowerCabinet,
+  /// <summary>
+  /// 机柜
+  /// </summary>
+  Cabinet,
+  /// <summary>
+  /// 空调
+  /// </summary>
+  AirCondition,
+  /// <summary>
+  /// UPS
+  /// </summary>
+  UPS,
+  /// <summary>
+  /// 摄像头
+  /// </summary>
+  Camera,
+  /// <summary>
+  /// 新风机
+  /// </summary>
+  NewWindMachine,
+  /// <summary>
+  /// 烟感
+  /// </summary>
+  SmokeDetector,
+  /// <summary>
+  /// 声光报警
+  /// </summary>
+  AudibleVisualAlarm,
+  /// <summary>
+  /// 漏水线
+  /// </summary>
+  LeakWater,
+  /// <summary>
+  /// 墙
+  /// </summary>
+  Wall,
+  /// <summary>
+  /// 地板
+  /// </summary>
+  Floor,
+  /// <summary>
+  /// 窗户
+  /// </summary>
+  Window,
+  /// <summary>
+  /// 门
+  /// </summary>
+  Door,
+  /// <summary>
+  /// 气流模拟
+  /// </summary>
+  AirFlow,
+  /// <summary>
+  /// 墙角
+  /// </summary>
+  Corner,
+  /// <summary>
+  /// 消防设备
+  /// </summary>
+  FireFighting,
+  /// <summary>
+  /// 照明设备
+  /// </summary>
+  Lighting,
+  /// <summary>
+  /// 电子围栏
+  /// </summary>
+  Enclosure,
+  /// <summary>
+  /// 车位
+  /// </summary>
+  ParkingLot,
+  /// <summary>
+  /// 电梯
+  /// </summary>
+  Elevator,
+  /// <summary>
+  /// 其他
+  /// </summary>
+  Other,
+  /// <summary>
+  /// 架式设备
+  /// </summary>
+  InrackAsset,
+  /// <summary>
+  /// 气体检测
+  /// </summary>
+  GasDetection,
+  /// <summary>
+  /// 安防设备
+  /// </summary>
+  Security,
+  /// <summary>
+  /// 外景
+  /// </summary>
+  OutDoorScene,
+  /// <summary>
+  /// 红外
+  /// </summary>
+  Infrared,
+  /// <summary>
+  /// 天空盒
+  /// </summary>
+  SkyBox,
+  /// <summary>
+  /// UI
+  /// </summary>
+  UI3D,
+  /// <summary>
+  /// 冷通道门
+  /// </summary>
+  ColdTongDoor,
+  /// <summary>
+  /// 虚拟盒子
+  /// </summary>
+  VirtualBox,
+  /// <summary>
+  /// 漫游盒子
+  /// </summary>
+  PathPint,
+  /// <summary>
+  /// 端口
+  /// </summary>
+  Port,
+  /// <summary>
+  /// 定位接收器
+  /// </summary>
+  Positioner,
+  /// <summary>
+  /// 自动动画
+  /// </summary>
+  AutoAnimation,
+  /// <summary>
+  /// 地图
+  /// </summary>
+  MapModel
+```

package/docs/project/projectmgr.md

@@ -0,0 +1,73 @@
+## 加载场景
+
+如下代码所示
+
+```javascript
+//加载内景
+app
+  .create({
+    fileUrl: './mviotjs/Project.json', //场景文件 必须
+    libraryUrl: './mviotjs', //模型库路径 必须
+    rotation: null, //旋转 可选
+    parent: null, //父节点对象 可选(楼栋物体)
+  })
+  .then((_scenes: any) => {
+    _scenes[0].switch()
+  })
+```
+
+```javascript
+//园区，内景集成加载
+app
+  .create({
+    fileUrl: './mviotjs/campus.json',
+    libraryUrl: './mviotjs',
+  })
+  .then((_campus: any) => {
+    app
+      .create({
+        fileUrl: './mviotjs/Project.json',
+        libraryUrl: './mviotjs',
+        rotation: { x: 0, y: Math.PI / 2, z: 0 }, //为弧度制
+        parent: _campus[0].children[8], //某一栋大楼
+      })
+      .then((_scenes: any) => {
+        console.log(_scenes)
+      })
+    _campus[0].switch() //聚焦
+  })
+```
+
+## 场景层级树
+
+层级树如下图所示：
+
+![tree](./scenetree.jpg 'mviotjs-tree')
+
+默认场景层级为：园区》楼栋》楼层》房间》物体
+
+每层以 children 获取子物体，以 parent 获取父物体
+
+## 销毁场景
+
+```javascript
+app.root.delete()
+```
+
+### 销毁自身
+
+```javascript
+obj.delete()
+```
+
+## 切换层级
+
+```javascript
+obj.focus()
+```
+
+## 层级回退
+
+```javascript
+app.root.goBack()
+```

package/docs/started/environment.md

@@ -0,0 +1,42 @@
+在使用以下代码创建场景实例后即可进行 3d 场景的环境配置
+
+```javascript
+var app = new Mviot.App(container)
+```
+
+## 背景颜色
+
+```javascript
+//rgba(0-1);
+app.environment.color = { r: 0, g: 0.0588, b: 0.1176, a: 1 }
+```
+
+## 背景图片
+
+```javascript
+app.environment.setBackground('./res/bg.png')
+```
+
+## 场景反射
+
+```javascript
+app.environment.reflex('./res/environment.env', 0.5)
+```
+
+## 显示 fps（帧率）
+
+```javascript
+//cssText(可选):样式字符串，默认为："position: fixed;left: 5px;bottom: 5px;z-index:999999999; font-size: 10px;color: rgb(0, 255, 0);text-shadow:rgba(0, 0, 0, 0.2) 1px 1px 0;"
+app.environment.showFps()
+```
+
+## 节点材质
+
+```javascript
+const nodeMats = [
+  { id: 'B1', url: './mviotjs/ndoemats/B1.json' },
+  { id: 'hLine', url: './mviotjs/ndoemats/hLine.json' },
+  { id: 'vLine', url: './mviotjs/ndoemats/vLine.json' },
+]
+await app.environment.loadNodeMats(nodeMats) //必须使用await强制同步加载，防止不生效
+```

package/docs/started/quickstart.md

@@ -0,0 +1,89 @@
+# npm 安装
+
+推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
+
+``` js
+  npm i mx3d
+```
+采用 nodejs 开发时，需配置 webpack 排除 mx3d 打包进工程代码
+
+# CDN
+
+目前可以通过 [unpkg.com/mx3d](https://unpkg.com/mx3d/) 获取到最新版本的资源，在页面上引入 js文件即可开始使用。
+
+``` js
+<!-- 引入组件库 -->
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.seat.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.kernel.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.loaders.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.dazzle.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/mx3d.min.js"></script>
+```
+
+我们建议使用 CDN 引入 mx3d 的用户在链接地址上锁定版本，以免将来 mx3d 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/)。
+
+# Hello mx3djs
+
+通过 CDN 的方式我们可以很容易地使用 mx3d 写出一个 Hello mx3djs 页面。[在线演示](http://docs.wodashijie.com/script?scrId=5939cb6568424d7d8821ece31420966b)
+
+``` html
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="renderer" content="webkit">
+    <meta name="viewport" content="width=1920,user-scalable=no, viewport-fit=cover">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+        
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            margin: 0;
+            padding: 0;
+            overflow: hidden;
+        }
+        
+        #container {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.seat.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.kernel.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.loaders.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/core/mx3d.dazzle.min.js"></script>
+    <script src="https://www.unpkg.com/mx3d/mx3d.min.js"></script>
+    <title>Hello world</title>
+</head>
+<body>
+    <div id="container"></div>
+    <!-- built files will be auto injected -->
+</body>
+<script>
+    var container = document.getElementById("container");
+    var app = new MX3D.App(container);
+    app.showFps();
+    var _t = new Date().getTime();
+    app.create({
+        fileUrl: "http://h5.wodashijie.com/api/OpenScene/GetProject?id=nLfqWnZyD5zAdSg9", //场景文件
+        libraryUrl: null, //模型库路径
+        complete: null,
+        progress: (_x) => {
+       //加载进度
+            console.log(_x)
+        }
+     }).then((data) => {
+        app.Project.show();
+        console.log(parseInt(new Date().getTime() - _t) / 1000);
+    })
+</script>
+</html>
+```
+
+如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。

package/lib/components/ConduitObject.d.ts

@@ -1,6 +1,7 @@
 import DefaultObject from "./DefaultObject";
 export default class ConduitObject extends DefaultObject {
     alpha: number;
+    color: string;
     bind(_m: any): void;
     setFlash(_level?: number): void;
     setOpaque(): void;

package/mx3d.js

@@ -7840,12 +7840,15 @@ class DefaultObject_DefaultObject {
         this.instance.setEnabled(_value);
         this.isEnabled = _value;
         if (this.isEnabled) {
-            this.instance.isPickable = this.isMonitor;
-            this.instance.enablePointerMoveEvents = this.isMonitor;
+            this.instance.isPickable = this.executes.count() > 0;
+            if (this.executes.find(EventType.eover) || this.executes.find(EventType.out))
+                this.instance.enablePointerMoveEvents = true;
+            else
+                this.instance.enablePointerMoveEvents = false;
         }
         else {
-            this.instance.isPickable = this.isEnabled;
-            this.instance.enablePointerMoveEvents = this.isEnabled;
+            this.instance.isPickable = false;
+            this.instance.enablePointerMoveEvents = false;
         }
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = false;
     }
@@ -7884,8 +7887,8 @@ class DefaultObject_DefaultObject {
         _o.setBoundingInfo(bound);
         this.instance = this.app.Resources.BOX.clone(this.id);
         this.instance.id = this.id;
-        this.instance.enablePointerMoveEvents = true;
-        this.instance.isPickable = true;
+        this.instance.enablePointerMoveEvents = false;
+        this.instance.isPickable = false;
         this.instance.scaling = new BABYLON.Vector3((bound.maximum.x - bound.minimum.x) * _o.scaling.x, (bound.maximum.y - bound.minimum.y) * _o.scaling.y, (bound.maximum.z - bound.minimum.z) * _o.scaling.z);
         if (this.instance.scaling.y == 0)
             this.instance.scaling.y = 0.01;
@@ -7932,6 +7935,7 @@ class DefaultObject_DefaultObject {
         if (type == EventType.leftClick || type == EventType.rightClick) {
             this.clickEvents.remove(type);
             this.clickEvents.add(type, callback);
+            this.instance.isPickable = true;
             execut = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, (e) => {
                 let leftCall = this.clickEvents.find(EventType.leftClick);
                 if (leftCall && e.sourceEvent.button == 0)
@@ -7948,12 +7952,16 @@ class DefaultObject_DefaultObject {
         }
         else if (type == EventType.doubleClick)
             execut = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnDoublePickTrigger, (e) => callback(this, e));
-        else if (type == EventType.eover)
+        else if (type == EventType.eover) {
             execut = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, (e) => callback(this, e));
+            this.instance.enablePointerMoveEvents = true;
+        }
         else if (type == EventType.longPress)
             execut = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLongPressTrigger, (e) => callback(this, e));
-        else if (type == EventType.out)
+        else if (type == EventType.out) {
             execut = new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, (e) => callback(this, e));
+            this.instance.enablePointerMoveEvents = true;
+        }
         if (execut) {
             if (!this.action) {
                 this.action = new BABYLON.ActionManager(this.app.scene);
@@ -8078,6 +8086,7 @@ class ConduitObject_ConduitObject extends DefaultObject_DefaultObject {
         this.isMonitor = _m.isMonitor;
         this.objectType = _m.objectType;
         this.isVisible = true;
+        this.color = _m.color;
         let pists = Tools.ToARRVector3(_m.pints);
         this.instance = Tools.createTube(_m.id, pists, _m.radius, this.app);
         let mat = new BABYLON.StandardMaterial(_m.id, this.app.scene);
@@ -8102,7 +8111,9 @@ class ConduitObject_ConduitObject extends DefaultObject_DefaultObject {
         if (this.effectType != EffectType.Opaque)
             return;
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = true;
+        this.optimization(false);
         this.instance.material.emissiveColor = src.EffectMgr.colors[_level];
+        this.app.Glow.addIncludedOnlyMesh(this.instance);
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = false;
         this.effectType = EffectType.Flash;
     }
@@ -8111,6 +8122,8 @@ class ConduitObject_ConduitObject extends DefaultObject_DefaultObject {
         if (this.effectType == EffectType.Opaque)
             return;
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = true;
+        this.app.Glow.removeIncludedOnlyMesh(this.instance);
+        this.optimization(true);
         this.instance.material.alpha = this.alpha;
         this.instance.material.emissiveColor = null;
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = false;
@@ -8121,6 +8134,8 @@ class ConduitObject_ConduitObject extends DefaultObject_DefaultObject {
         if (this.effectType != EffectType.Opaque)
             return;
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = true;
+        this.app.Glow.removeIncludedOnlyMesh(this.instance);
+        this.optimization(false);
         this.instance.material.alpha = alpha;
         this.app.scene.blockfreeActiveMeshesAndRenderingGroups = false;
         this.effectType = EffectType.Transparent;
@@ -9735,8 +9750,9 @@ class App_App {
         // this.Glow.intensity = 5;
         // this.gl.gl1 = new BABYLON.GlowLayer("glow", this.scene);
         // this.gl.gl1.intensity = 0.25;
-        // this.gl.gl2 = new BABYLON.GlowLayer("glow2", this.scene);
-        // this.gl.gl2.intensity = 1.0;
+        // this.gl = new BABYLON.GlowLayer("glow2", this.scene);
+        // console.log(this.gl)
+        // this.gl.intensity = 1.0;
         // gl.addIncludedOnlyMesh(this.ResourceMgr.transparentBox);
         this.container = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("screenUI");
         // this.toolTip = new ToolTip(this, this.container);
@@ -9794,8 +9810,10 @@ class App_App {
     }
     create(_config) {
         this.highQualityMode = _config.highQualityMode;
-        if (this.highQualityMode)
+        if (this.highQualityMode) {
             this.Glow = new BABYLON.GlowLayer("glow", this.scene); //自发光，有可能造成内存泄露;且性能要求较高
+            this.Glow.addIncludedOnlyMesh(this.Resources.BOX);
+        }
         if (_config.libraryUrl)
             this.Resources.resourcePath = _config.libraryUrl;
         return new Promise(async (resolve, reject) => {
@@ -10091,11 +10109,11 @@ class UI_UI {
     static createIcon(_id, _anchor, _size, _height) {
         let icon;
         _anchor.app.scene.blockfreeActiveMeshesAndRenderingGroups = true;
-        icon = new external_Dazzle_["Icon"](_id);
+        icon = new external_Dazzle_["Icon"](_id, _anchor.app.scene);
         icon.size = _size;
         icon.height = _height;
-        icon.pint = new BABYLON.Mesh(_anchor[0].id + '_pint');
-        let pos = _anchor[0].instance.getAbsolutePosition();
+        icon.pint = new BABYLON.Mesh(_id + '_pint');
+        let pos = _anchor.visualAngle.focus.clone();
         // if (_anchor[0].objectType == ObjectType.Floor) {
         //   pos = _anchor[0].instance.getAbsolutePivotPoint();
         // }