update

src/utils/common/CommonGuiDbListTwo.js

@@ -0,0 +1,1062 @@
+/**
+ * 操作 3d场景 GUI 改成上下两行显示逻辑
+ */
+export class CommonGuiDbListTwo {
+    
+    // 每次 new 出对象则会调用这个构造函数
+    constructor() {
+        
+        // babylon渲染引擎
+        this.objEngine = null;
+        // 3d世界的场景，后续要操作3d世界常用的对象
+        this.objScene = null;
+        // babylon 对象，懂babylon，就可以使用babylon的api去操作
+        this.BABYLON = null;
+        
+        this.bgImgConfig = {
+            "url" : "./13/bg.webp",
+            "width" : 409,
+            "height" : 304,
+        }
+
+        /**
+         * 对应自定义code 的纹理对象
+         * 当 this.codeObjJson 或 this.addOrUpdateJson 被删除，该对象也要跟着删除
+         */
+        this.advancedDynamicTextureJson = {};
+
+        /**
+         * 对应自定义code，对应的gui数据列表
+         * 当 this.advancedDynamicTextureJson 和 this.addOrUpdateJson 被删除，该对象也要跟着删除
+         */
+        this.codeObjJson = {};
+
+        /**
+         * 对应自定义code，对应的gui数据列表
+         * 在调用 addOrUpdate 方法,记录所有参数
+         * 当 this.advancedDynamicTextureJson 和 this.codeObjJson 被删除，该对象也要跟着删除
+         */
+        this.addOrUpdateJson = {};
+
+    }
+
+    // 实现单例模式
+    static find() {
+        if (!CommonGuiDbListTwo.instance) {
+            CommonGuiDbListTwo.instance = new CommonGuiDbListTwo();
+        }
+        return CommonGuiDbListTwo.instance;
+    }
+
+
+    /**
+     * 根据code 获取对应的UI的纹理对象
+     * code             自定义code
+     * 返回 json对象
+     * { "objAdvancedDynamicTexture" : objAdvancedDynamicTexture, "objMesh" : objMesh }
+     */
+    getAdvancedDynamicTexture = function(code) {
+        
+        if (this.advancedDynamicTextureJson[code] != null && this.advancedDynamicTextureJson[code] != undefined) {
+            return this.advancedDynamicTextureJson[code];
+        }
+        
+        var objEngine = this.objEngine;
+        var objScene = this.objScene;
+        var BABYLON = this.BABYLON;
+
+        var meshId = "myCommonGuiDbList_" + code;
+        // 新增一个物体，是用来后续定位到对应的三维坐标使用的
+        var objMesh = BABYLON.MeshBuilder.CreatePlane(
+            meshId, { width: 1, height : 1, }, objScene);
+        objMesh.id = meshId;
+        
+        // 不可以被选中
+        objMesh.isPickable = false;
+        // // 必须设置可见，否则会看不到这个GUI的
+        // objMesh.visibility = 1;
+        // 因为不是用 BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh 所以可以设置为 不可见
+        objMesh.visibility = 0;
+
+        objMesh.position = new BABYLON.Vector3(0, 0, 0);
+
+        // var objAdvancedDynamicTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(
+        //     objMesh
+        // );
+
+        var objAdvancedDynamicTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(
+            "myCommonGuiDbList_AdvancedDynamicTexture_" + code, true, objScene
+        );
+
+        var json = {
+            "objAdvancedDynamicTexture" : objAdvancedDynamicTexture,
+            "objMesh" : objMesh,
+        };
+
+        this.advancedDynamicTextureJson[code] = json;
+
+        // console.log("创建GUI对象", json);
+
+        return this.advancedDynamicTextureJson[code];
+    }
+
+    
+    /**
+     * 自定义code 进行创建，如果存在则是更新GUI
+     * code                     自定义code
+     * position                 坐标
+     * scaling                  UI整体缩放
+     * width                    控制宽度 px  如果 width <= -1 或者 height <= -1 则变成,显示指定固定UI
+     * height                   控制高度 px
+     * myJson                   自定义回调数据
+     * callback                 自定义回调
+     * list                     展示数据的列表
+     *                          例如
+     *                          [
+     *                               { "type" : "switch", "tagName" : "运行状态", "text" : "开到位", "value" : 1, "unit" : null },
+     *                               { "type" : "switch", "tagName" : "运行状态", "text" : "关闭", "value" : 0, "unit" : null },
+     *                               { "type" : "analog", "tagName" : "瞬时流量", "text" : "关闭", "value" : 123, "unit" : "L/h" },
+     *                               { "type" : "text", "tagName" : "瞬时流量", "text" : "关闭", "value" : "人生啊", "unit" : null },
+     *                          ]
+     * 
+     * cameraRadiusEventBool    是否是通过 cameraRadiusEvent 方法,来更新数据
+     * 
+     */
+    addOrUpdate = function(code, position, scaling, width, height, myJson, callback, list, cameraRadiusEventBool) {
+        
+        var objEngine = this.objEngine;
+        var objScene = this.objScene;
+        var BABYLON = this.BABYLON;
+        var thisClass = this;
+        
+        var getAdvancedDynamicTexture = this.getAdvancedDynamicTexture(code);
+        var objAdvancedDynamicTexture = getAdvancedDynamicTexture["objAdvancedDynamicTexture"];
+        var objMesh = getAdvancedDynamicTexture["objMesh"];
+
+        // 是否鼠标放在上方，展示数据
+        var myCommonGuiMovePopUpBool = false;
+        if (objMesh["MyCommonGuiMovePopUp"] != null && objMesh["MyCommonGuiMovePopUp"] != undefined) {
+            myCommonGuiMovePopUpBool = objMesh["MyCommonGuiMovePopUp"];
+        }
+
+        // 统一宽度高度,控制点位大小
+        var commonWidthHeight = width;
+        
+        // 如果不是 cameraRadiusEvent 方法,来更新数据
+        if (cameraRadiusEventBool == false || cameraRadiusEventBool == null || cameraRadiusEventBool == undefined) {
+            // 记录最新的 addOrUpdate 方法 参数数据
+            this.addOrUpdateJson[code] = {
+
+                "code" : code,
+                "position" : position,
+                "scaling" : scaling,
+                "width" : width,
+                "height" : height,
+                "myJson" : myJson,
+                "callback" : callback,
+                "list" : list,
+                "cameraRadiusEventBool" : cameraRadiusEventBool,
+
+            };
+        }
+        
+        // // 可以通过这样，来实现该UI渐变显示出来的效果， 默认0 隐藏
+        // objAdvancedDynamicTexture.rootContainer.alpha = 0.5;
+        // 也可以通过缩放的方式，实现从小到大，或者从大到小的效果
+        objAdvancedDynamicTexture.rootContainer.scaleX = scaling;
+        objAdvancedDynamicTexture.rootContainer.scaleY = scaling;
+
+        // console.log(
+        //     "objAdvancedDynamicTexture.rootContainer", objAdvancedDynamicTexture
+        // );
+
+        objMesh.position.x = position.x;
+        objMesh.position.y = position.y;
+        objMesh.position.z = position.z;
+
+        var cameraRadiusBool = this.cameraRadiusBool(objMesh.position);
+
+        // 是否使用公共的宽度高度
+        var commonWidthHeightBool = false;
+        if (
+            (
+                ( width <= -1 || height <= -1 )
+                && (
+                    this.addOrUpdateJson[code] != null
+                    && this.addOrUpdateJson[code] != undefined
+                )
+                // 鼠标不需要上方展示
+                && myCommonGuiMovePopUpBool == false
+            )
+            || (
+                // 没有在相机范围内
+                cameraRadiusBool == false
+                // 鼠标不需要上方展示
+                && myCommonGuiMovePopUpBool == false
+            )
+        ) {
+
+            var addOrUpdateJson = this.addOrUpdateJson[code];
+            commonWidthHeight = (addOrUpdateJson.width * 0.05);
+            // commonWidthHeight = (addOrUpdateJson.width * 0.15);
+            commonWidthHeightBool = true;
+            
+        }
+        
+        var objImageWidthNew = width;
+        var objImageHeightNew = width / this.bgImgConfig.width *  this.bgImgConfig.height;
+
+        var objImageX = (objImageWidthNew / 2);
+        var objImageY = (objImageHeightNew / 2 - 3);
+
+        // 滚动条缩小比例
+        var scaleCommon = 0.83;
+        
+        /**
+         * 值越大，显示就会越小
+         * Gets or sets the ideal width used to design controls. The GUI will then rescale everything accordingly
+         * 获取或设置用于设计控件的理想宽度。然后，GUI将相应地重新缩放所有内容
+         */
+        // objAdvancedDynamicTexture.idealWidth = idealWidth;
+
+        // 如果不存在的时候
+        if (this.codeObjJson[code] == null || this.codeObjJson[code] == undefined) {
+            
+            // ########## 长方形,作为最外边框，
+            var objRectangle = new BABYLON.GUI.Rectangle();
+
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            objRectangle.zIndex = 1;
+            
+            // 半径
+            objRectangle.cornerRadius = 0;
+            objRectangle.top = "0px";
+            // objRectangle.width = (width) + "px";
+            // objRectangle.height = (height) + "px";
+            
+            // 边框尺寸
+            objRectangle.thickness = 0;
+            // 边框颜色
+            objRectangle.color = "#ffffff";
+            // objRectangle.background = "rgba(38, 179, 250, 0.8)";
+            // objRectangle.background = "rgba(6, 8, 8, 0)";
+            objRectangle.background = "transparent";
+
+            /**
+             * 获取或设置水平对齐方式
+             * BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT        水平居左
+             * BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER      水平居中
+             * BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT       水平居右
+             */
+            objRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            /**
+             * 获取或设置垂直对齐方式
+             * BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP       顶部
+             * BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER    垂直居中
+             * BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM    底部
+             */
+            objRectangle.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+
+            // 添加到ui里
+            objAdvancedDynamicTexture.addControl(objRectangle);
+
+            if (objMesh != null && objMesh != undefined) {
+                /**
+                 * Link current control with a target mesh
+                 * 将当前控件与目标网格链接
+                 */
+                objRectangle.linkWithMesh(objMesh);
+            }
+            
+            /**
+             * Gets or sets a value indicating the offset on Y axis to the linked mesh
+             * 获取或设置一个值，该值指示链接网格在Y轴上的偏移量
+             */
+            objRectangle.linkOffsetY = 0;
+            
+            // 变成json对象
+            this.codeObjJson[code] = {};
+            // 记录最外框
+            this.codeObjJson[code]["objRectangle"] = objRectangle;
+
+            // ########## 添加一个统一背景图
+            let objImage = new BABYLON.GUI.Image("loadingBg", this.bgImgConfig["url"]);
+
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            objImage.zIndex = 0;
+
+            objImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            objImage.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+
+
+            // objImage.top = "0px";
+            // objImage.left = "0px";
+            // 1 = 100% , 0.5 则为 50%
+            // objImage.width = "192px";
+            // objImage.height = "66px";
+
+            objImage.width = objImageWidthNew + "px";
+            objImage.height = objImageHeightNew + "px";
+            
+            // objImage.top =  "-" + (objImageY) + "px";
+            // objImage.left = (objImageX) + "px";
+
+            // 重新计算一个，跟原点之间距离逻辑
+            objImage.top =  "-" + (objImageY * 0.92) + "px";
+            objImage.left = (objImageX * 0.9) + "px";
+            
+            // 触发点击的时候
+            objImage.onPointerUpObservable.add(function() {
+            });
+
+            // // 触发鼠标移开的时候
+            // objImage.onPointerOutObservable.add(function() {
+
+            //     // if (callback != null && callback != undefined) {
+            //     //     callback(myJson);
+            //     // }
+            //     console.log("鼠标从 objImage 移开的时候");
+            //     thisClass.removeMeshMyCommonGuiMovePopUp()
+
+            // });
+
+            objRectangle.addControl(objImage);
+            
+            // 记录背景图
+            this.codeObjJson[code]["objImage"] = objImage;
+
+            // ########## 创建一个矩形容器，用于控制，展示球体点位使用
+            var objRectangleQiu = new BABYLON.GUI.Rectangle();
+
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶。这里必须调整比较大，要不然，会导致原点移动上方会失灵
+            objRectangleQiu.zIndex = 9;
+            
+            // 半径
+            objRectangleQiu.cornerRadius = 0;
+            // objRectangleQiu.top = "0px";
+            // objRectangleQiu.left = "0px";
+            
+            // objRectangleQiu.top =  "-" + (objImageY * 0.05) + "px";
+            // objRectangleQiu.left = (objImageX * 0.05) + "px";
+            
+            objRectangleQiu.width = (objImageWidthNew) + "px";
+            objRectangleQiu.height = (objImageHeightNew) + "px";
+            
+            // 边框尺寸
+            objRectangleQiu.thickness = 0;
+            // 边框颜色
+            objRectangleQiu.color = "#ffffff";
+            objRectangleQiu.background = "transparent";
+            // objRectangleQiu.background = "#ffffff06";
+            
+            objRectangleQiu.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            objRectangleQiu.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            this.codeObjJson[code]["objRectangleQiu"] = objRectangleQiu;
+
+            objRectangle.addControl(objRectangleQiu);
+            
+            // ########## 创建一个矩形容器，用于控制，数据展示的坐标位置
+            var objRectangleMain = new BABYLON.GUI.Rectangle();
+
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            objRectangleMain.zIndex = 1;
+            
+            // 半径
+            objRectangleMain.cornerRadius = 0;
+            // objRectangleMain.top = "0px";
+
+            objRectangleMain.top = (objImageY * 0.13) + "px";
+            objRectangleMain.left = "-" + (objImageX * 0.1) + "px";
+
+            objRectangleMain.width = (objImageWidthNew * scaleCommon ) + "px";
+            // objRectangleMain.height = (objImageHeightNew * scaleCommon ) + "px";
+            objRectangleMain.height = (objImageHeightNew * 0.6 ) + "px";
+            
+            // 边框尺寸
+            objRectangleMain.thickness = 0;
+            // 边框颜色
+            objRectangleMain.color = "#ffffff";
+            objRectangleMain.background = "transparent";
+            
+            objRectangleMain.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
+            objRectangleMain.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+            this.codeObjJson[code]["objRectangleMain"] = objRectangleMain;
+
+            objRectangle.addControl(objRectangleMain);
+            
+            // ########## 创建滚动条容器
+            var objScrollViewer = new BABYLON.GUI.ScrollViewer();
+            // 在滚动条被滚动的时候，三维场景也不会被同时缩放，就必须设置为true
+            objScrollViewer.isPointerBlocker = true;
+            // 获取或设置条形图的大小【滚动条宽度】【不可以用px，否则会出现问题】
+            objScrollViewer.barSize = 0;
+            // 边框尺寸
+            objScrollViewer.thickness = 0;
+            // objScrollViewer.thickness = 0;
+            // 边框颜色
+            // objScrollViewer.color = "#ffff21";
+            objScrollViewer.color = "transparent";
+            
+            objScrollViewer.height = objRectangleMain.height;
+            // objScrollViewer.height = (objImageHeightNew * 0.6) + "px";;
+            // objScrollViewer.height = height + "px";
+
+            objRectangleMain.addControl(objScrollViewer);
+            
+            // 容器 Scrollviewer想要一个子容器
+            var subContainer = new BABYLON.GUI.StackPanel();
+            subContainer.width = 1;
+
+            // 添加到滚动条组件里
+            objScrollViewer.addControl(subContainer);
+
+            // 记录滚动条对象
+            this.codeObjJson[code]["objScrollViewer"] = objScrollViewer;
+            // 记录滚动条容器
+            this.codeObjJson[code]["subContainer"] = subContainer;
+            
+        }
+
+        // console.log(
+        //     "addOrUpdate = function(",
+        //     code, position, list, getAdvancedDynamicTexture
+        // );
+        
+        var objContainer = this.codeObjJson[code];
+        var objRectangle = objContainer["objRectangle"];
+        var objScrollViewer = objContainer["objScrollViewer"];
+        var subContainer = objContainer["subContainer"];
+        var objRectangleQiu = objContainer["objRectangleQiu"];
+
+        // 根据情况重新更新尺寸
+        // objRectangle.width = (commonWidthHeightBool == true ? commonWidthHeight : width) + "px";
+        // objRectangle.height = (commonWidthHeightBool == true ? commonWidthHeight : height) + "px";
+        // objRectangle.cornerRadius = (commonWidthHeightBool == true ? commonWidthHeight * 0.5 : 0);
+
+        // console.log("objImageWidthNew ===>", objImageWidthNew, objImageHeightNew, commonWidthHeight, width, height);
+
+        objRectangle.width = (commonWidthHeightBool == true ? commonWidthHeight : objImageWidthNew * 2) + "px";
+        objRectangle.height = (commonWidthHeightBool == true ? commonWidthHeight : objImageHeightNew * 2) + "px";
+        objRectangle.cornerRadius = (commonWidthHeightBool == true ? commonWidthHeight * 0.5 : 0);
+
+        // console.log(
+        //     "addOrUpdate = function(",
+        //     objRectangle, objScrollViewer, subContainer
+        // );
+
+        // 从当前容器中删除所有控件
+        subContainer.clearControls();
+        objRectangleQiu.clearControls();
+
+        // // 此时说明只显示固定的UI,例如点位,或者别的
+        // if (
+        //     (
+        //         ( width <= -1 || height <= -1 )
+        //         && (
+        //             this.addOrUpdateJson[code] != null
+        //             && this.addOrUpdateJson[code] != undefined
+        //         )
+        //         // 鼠标不需要上方展示
+        //         && myCommonGuiMovePopUpBool == false
+        //     )
+        //     || (
+        //         // 没有在相机范围内
+        //         cameraRadiusBool == false
+        //         // 鼠标不需要上方展示
+        //         && myCommonGuiMovePopUpBool == false
+        //     )
+        // ) {
+            
+            var addOrUpdateJson = this.addOrUpdateJson[code];
+            
+            // 创建按钮
+            var commonBtn = BABYLON.GUI.Button.CreateSimpleButton(code + "_commonBtn", "");
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            commonBtn.zIndex = 3;
+
+            commonBtn.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            commonBtn.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            
+            // commonBtn.width = commonWidthHeight + "px";
+            // commonBtn.height = commonWidthHeight + "px";
+
+            // commonBtn.width = commonWidthHeight / 0.05 + "px";
+            // commonBtn.height = commonWidthHeight / 0.05 + "px";
+
+            commonBtn.width = ( addOrUpdateJson.width * 0.05 ) + "px";
+            commonBtn.height = ( addOrUpdateJson.width * 0.05 ) + "px";
+
+            
+            // 控制颜色
+            var commonColor = "#00ff00";
+
+            if (addOrUpdateJson["list"] != null && addOrUpdateJson["list"] != undefined) {
+                
+                var list = addOrUpdateJson["list"];
+                
+                try {
+
+                    var listObj = list.length > 1 ? list[1] : list[0];
+                    if (listObj["fontColor"] != null && listObj["fontColor"] != undefined) {
+                        commonColor = listObj["fontColor"];
+                    }
+                    else if (listObj["right_fontColor"] != null && listObj["right_fontColor"] != undefined) {
+                        commonColor = listObj["right_fontColor"];
+                    }
+                    else if (listObj["left_fontColor"] != null && listObj["left_fontColor"] != undefined) {
+                        commonColor = listObj["left_fontColor"];
+                    }
+                    
+                } catch (e) {}
+
+            }
+
+            // 字体颜色
+            commonBtn.color = commonColor;
+            // 圆角
+            // commonBtn.cornerRadius = commonWidthHeight / 0.05 * 0.5;
+            commonBtn.cornerRadius = ( addOrUpdateJson.width * 0.05) * 0.5;
+            
+            // commonBtn.cornerRadius = (objImageWidthNew / 0.005) * 0.5;
+            // 背景色
+            commonBtn.background = commonColor;
+            // 字体大小
+            commonBtn.fontSize = "16px";
+
+            // 边框尺寸
+            commonBtn.thickness = 1;
+            // buttonLeft.thickness = 1;
+            // 重新命名名字
+            commonBtn.textBlock.text = "";
+
+            // commonBtn.top =  "" + (0) + "px";
+            // commonBtn.left = (30) + "px";
+
+            // commonBtn.top =  "-" + (objImageY * 0.05) + "px";
+            // commonBtn.left = (objImageX * 0.05) + "px";
+
+            commonBtn.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            commonBtn.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            
+            // 触发点击弹起的时候
+            commonBtn.onPointerUpObservable.add(function() {
+                if (callback != null && callback != undefined) {
+                    // console.log("鼠标点击了");
+                    // thisClass.meshOnlyAddMyCommonGuiMovePopUp(objMesh);
+                    callback(myJson);
+                }
+            });
+
+            // 触发点击弹起的时候
+            commonBtn.onPointerMoveObservable.add(function() {
+                
+                // if (callback != null && callback != undefined) {
+                //     callback(myJson);
+                // }
+
+                // console.log("鼠标移动到上方");
+                thisClass.meshOnlyAddMyCommonGuiMovePopUp(objMesh);
+                
+            });
+
+            // 触发鼠标移开的时候
+            commonBtn.onPointerOutObservable.add(function() {
+
+                // if (callback != null && callback != undefined) {
+                //     callback(myJson);
+                // }
+                // console.log("鼠标移开的时候");
+                thisClass.removeMeshMyCommonGuiMovePopUp()
+
+            });
+            
+            // // 添加UI到容器
+            // subContainer.addControl(commonBtn);
+            objRectangleQiu.addControl(commonBtn);
+
+        //     return this;
+
+        // }
+
+        for (var i = 0; i < list.length; i++) {
+
+            var objList = list[i];
+            // console.log(
+            //     "objList", objList
+            // );
+
+            var valMain = "";
+            switch (objList.type) {
+                case 'switch':
+                    if (objList["text"] != null && objList["text"] != undefined) {
+                        valMain = objList["text"];
+                    }
+                    break;
+
+                default:
+                    if (objList["value"] != null && objList["value"] != undefined) {
+                        valMain = objList["value"];
+                    }
+
+                    if (objList["unit"] != null && objList["unit"] != undefined) {
+                        valMain += " " + objList["unit"];
+                    }
+
+            }
+            
+            // ---------- 长方形,作为最外边框， 
+            var listRectangle = new BABYLON.GUI.Rectangle();
+            // 半径
+            listRectangle.cornerRadius = 0;
+            // listRectangle.width = (width * 1) + "px";
+            listRectangle.width = (width * scaleCommon) + "px";
+            // listRectangle.height = objList["height"] + "px";
+
+            /**
+             * 由于需求要求，改成， 上下两行进行显示，这里算法跟着改变
+             */
+            var listHeight = (objImageHeightNew * 0.3 * 2);
+            // 修改成自适应的尺寸
+            // listRectangle.height = (objImageHeightNew * 0.3) + "px";
+            listRectangle.height = listHeight + "px";
+            
+            // 边框尺寸
+            listRectangle.thickness = 0;
+            // 边框颜色
+            listRectangle.color = objList["rectangleColor"];
+
+            // listRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+            // listRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+            // listRectangle.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+
+            listRectangle.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
+            listRectangle.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
+
+            // 在滚动条的子 面板增加UI
+            subContainer.addControl(listRectangle);
+            
+            // 如果是标题，则特殊处理
+            if (objList.type == "title") {
+
+                 // ---------- 矩形里，添加UI
+                // 创建按钮
+                var buttonCenter = BABYLON.GUI.Button.CreateSimpleButton(code + "_" + i, "");
+                // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+                buttonCenter.zIndex = 1;
+
+                /**
+                 * 标题则特殊处理
+                 */
+                // 特殊处理,通过计算出自适应的逻辑
+                listRectangle.height = (objImageHeightNew * 0.28) + "px";
+
+                buttonCenter.width = (width) + "px";
+                // buttonCenter.width = (width * scaleCommon) + "px";
+                buttonCenter.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+                buttonCenter.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+
+                // 字体颜色
+                buttonCenter.color = objList["fontColor"];
+                // 圆角
+                buttonCenter.cornerRadius = 0;
+                // 背景色
+                // buttonCenter.background = objList["background"];
+                buttonCenter.background = "transparent";
+
+                // 这样支持透明
+                // buttonCenter.background = "#48985d60";
+                // 字体大小
+                buttonCenter.fontSize = objList["fontSize"] + "px";
+
+                // 边框尺寸
+                buttonCenter.thickness = 0;
+                // buttonCenter.thickness = 1;
+                // 重新命名名字
+                buttonCenter.textBlock.text = valMain;
+                
+                buttonCenter.textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+                buttonCenter.textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
+
+                console.log("buttonCenter.textBlock.text", buttonCenter.textBlock)
+
+                // 触发点击的时候
+                buttonCenter.onPointerUpObservable.add(function() {
+                    if (callback != null && callback != undefined) {
+                        callback(myJson);
+                    }
+                });
+                
+                // 添加UI到边框里
+                listRectangle.addControl(buttonCenter);
+                
+                continue;
+
+            }
+            
+            var btnLeftProportion = 0.5;
+
+            if (typeof objList.tagName =='string' && objList.tagName.length >= 8) {
+                btnLeftProportion = 0.6;
+            }
+
+            // ---------- 矩形里，添加UI
+            // 创建按钮
+            var buttonLeft = BABYLON.GUI.Button.CreateSimpleButton(code + "_" + i, "");
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            buttonLeft.zIndex = 1;
+
+            // buttonLeft.width = (width * btnLeftProportion) + "px";
+            buttonLeft.width = (width) + "px";
+            buttonLeft.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            buttonLeft.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+
+            buttonLeft.top = "-" + ( listHeight * 0.39 ) + "px";
+            buttonLeft.left = "" + ( width * 0.1 ) + "px";
+
+            // 字体颜色
+            buttonLeft.color = objList["left_fontColor"];
+            // 圆角
+            buttonLeft.cornerRadius = 0;
+            // 背景色
+            // buttonLeft.background = objList["left_background"];
+            buttonLeft.background = "transparent";
+            
+            // // 这样支持透明
+            // buttonLeft.background = "#48985d60";
+            // 字体大小
+            buttonLeft.fontSize = objList["left_fontSize"] + "px";
+
+            // 边框尺寸
+            buttonLeft.thickness = 0;
+            // buttonLeft.thickness = 1;
+            // 重新命名名字
+            buttonLeft.textBlock.text = objList.tagName;
+            buttonLeft.textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            buttonLeft.textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+            
+            // 触发点击的时候
+            buttonLeft.onPointerUpObservable.add(function() {
+                if (callback != null && callback != undefined) {
+                    callback(myJson);
+                }
+            });
+
+            // 添加UI到边框里
+            listRectangle.addControl(buttonLeft);
+
+            // ---------- 矩形里，添加UI
+            // 创建按钮
+            var buttonRight = BABYLON.GUI.Button.CreateSimpleButton(code + "_" + i, "");
+            // 堆叠，值越高，则越置顶,相同值,越后面创建则越置顶
+            buttonRight.zIndex = 1;
+
+            // buttonRight.width = (width * ( 1 - btnLeftProportion ) + 0) + "px";
+            // buttonRight.width = (width * ( 1 - btnLeftProportion - ( 1 - scaleCommon ) ) + 0) + "px";
+            buttonRight.width = (width) + "px";
+            buttonRight.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            buttonRight.horizontalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_LEFT;
+            
+            buttonRight.left = "" + ( width * 0.1 ) + "px";
+            buttonRight.top = "-" + ( listHeight * 0.15 ) + "px";
+
+            // 字体颜色
+            buttonRight.color = objList["right_fontColor"];
+            // 圆角
+            buttonRight.cornerRadius = 0;
+            // 背景色
+            // buttonRight.background = objList["right_background"];
+            buttonRight.background = "transparent";
+
+            // 这样支持透明
+            // buttonRight.background = "#48985d60";
+            // 字体大小
+            buttonRight.fontSize = objList["right_fontSize"] + "px";
+
+            // 边框尺寸
+            buttonRight.thickness = 0;
+            // buttonRight.thickness = 1;
+            // 重新命名名字
+            buttonRight.textBlock.text = "" + valMain;
+
+            buttonRight.textBlock.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
+            buttonRight.textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
+
+            // 触发点击的时候
+            buttonRight.onPointerUpObservable.add(function() {
+                if (callback != null && callback != undefined) {
+                    callback(myJson);
+                }
+            });
+
+            // 添加UI到边框里
+            listRectangle.addControl(buttonRight);
+            
+        }
+        
+    }
+
+
+    /**
+     * 根据code删除对应的GUI
+     * code             自定义的code
+     */
+    codeRemove = function(code) {
+
+        // this.advancedDynamicTextureJson = {};
+        // this.codeObjJson = {};
+
+        // 注意如下的删除顺序
+        if (this.codeObjJson[code] != null && this.codeObjJson[code] != undefined) {
+
+            var objCodeObjJson = this.codeObjJson[code];
+            
+            var objRectangle = objCodeObjJson["objRectangle"];
+            var objScrollViewer = objCodeObjJson["objScrollViewer"];
+            var subContainer = objCodeObjJson["subContainer"];
+            var objImage = objCodeObjJson["objImage"];
+            var objRectangleMain = objCodeObjJson["objRectangleMain"];
+            var objRectangleQiu = objCodeObjJson["objRectangleQiu"];
+            
+            subContainer.clearControls();
+            subContainer.dispose();
+
+            objScrollViewer.clearControls();
+            objScrollViewer.dispose();
+
+            // console.log("codeRemove objImage", objImage)
+            // objImage.clearControls();
+            objImage.dispose();
+
+            objRectangleMain.clearControls();
+            objRectangleMain.dispose();
+            
+            objRectangleQiu.clearControls();
+            objRectangleQiu.dispose();
+
+            objRectangle.clearControls();
+            objRectangle.dispose();
+            
+            this.codeObjJson[code] = null;
+            delete this.codeObjJson[code];
+
+        }
+
+        if (this.advancedDynamicTextureJson[code] != null && this.advancedDynamicTextureJson[code] != undefined) {
+
+            var objAdvancedDynamicTextureJson = this.advancedDynamicTextureJson[code];
+            var objAdvancedDynamicTexture = objAdvancedDynamicTextureJson["objAdvancedDynamicTexture"];
+            var objMesh = objAdvancedDynamicTextureJson["objMesh"];
+
+            objMesh.dispose();
+            objAdvancedDynamicTexture.dispose();
+            this.advancedDynamicTextureJson[code] = null;
+            delete this.advancedDynamicTextureJson[code];
+
+        }
+
+        if (this.addOrUpdateJson[code] != null && this.addOrUpdateJson[code] != undefined) {
+            this.addOrUpdateJson[code] = null;
+            delete this.addOrUpdateJson[code];
+        }
+
+        return this;
+
+    }
+
+    /**
+     * 删除全部ui
+     */
+    removeAll = function() {
+
+        for (var key in this.advancedDynamicTextureJson) {
+            this.codeRemove(key);
+        }
+
+    }
+
+
+    /**
+     * 是否在相机距离范围内
+     * position         坐标
+     */
+    cameraRadiusBool = function(position) {
+
+        var objEngine = this.objEngine;
+        var objScene = this.objScene;
+        var BABYLON = this.BABYLON;
+        
+        var activeCamera = objScene.activeCamera;
+        var activeCameraPosition = activeCamera.position;
+
+        // 多少范围内显示具体数据，否则则显示变成点位
+        var radiusMin = 10;
+        // var radiusMin = 50;
+        
+        // 得到距离
+        var distance = BABYLON.Vector3.Distance(
+            new BABYLON.Vector3(activeCameraPosition.x, activeCameraPosition.y, activeCameraPosition.z),
+            new BABYLON.Vector3(position.x, position.y, position.z)
+        );
+
+        if (distance <= radiusMin) {
+            return true;
+        }
+
+        return false;
+
+    }
+
+    /**
+     * 去除所有鼠标移动上方弹出GUI的逻辑
+     */
+    removeMeshMyCommonGuiMovePopUp = function() {
+
+        for (var key in this.advancedDynamicTextureJson) {
+
+            if (this.addOrUpdateJson[key] != null && this.addOrUpdateJson[key] != undefined) {
+
+                var objJson = this.advancedDynamicTextureJson[key];
+                var objMesh = objJson["objMesh"];
+                var objAdvancedDynamicTexture = objJson["objAdvancedDynamicTexture"];
+
+                // 鼠标上方，不需要弹出GUI数据
+                objMesh["MyCommonGuiMovePopUp"] = false;
+                
+            }
+        }
+
+        return this;
+
+    }
+
+    /**
+     * 只给指定的物体添加，鼠标移动上方弹出GUI的逻辑
+     * objMesh          被指定的物体
+     */
+    meshOnlyAddMyCommonGuiMovePopUp = function(objMesh) {
+
+        this.removeMeshMyCommonGuiMovePopUp();
+
+        if (objMesh != null && objMesh != undefined) {
+            // 鼠标上方，需要弹出GUI数据
+            objMesh["MyCommonGuiMovePopUp"] = true;
+        }
+
+        return this;
+
+    }
+    
+    /**
+     * 每帧控制镜头距离，来是否展示出GUI
+     * 距离远，则变成简短的文字，距离近，才根据实际的文字展示
+     */
+    cameraRadiusEvent = function() {
+        
+        var objEngine = this.objEngine;
+        var objScene = this.objScene;
+        var BABYLON = this.BABYLON;
+        
+        for (var key in this.advancedDynamicTextureJson) {
+            
+            if (this.addOrUpdateJson[key] != null && this.addOrUpdateJson[key] != undefined) {
+
+                var objAddOrUpdateJson = this.addOrUpdateJson[key];
+                // console.log(
+                //     "objAddOrUpdateJson", objAddOrUpdateJson
+                // );
+                
+                var objJson = this.advancedDynamicTextureJson[key];
+                var objMesh = objJson["objMesh"];
+                var objAdvancedDynamicTexture = objJson["objAdvancedDynamicTexture"];
+
+                var absolutePosition = objMesh.absolutePosition;
+                
+                var cameraRadiusBool = this.cameraRadiusBool(absolutePosition);
+
+                // 是否鼠标放在上方，展示数据
+                var myCommonGuiMovePopUpBool = false;
+                if (objMesh["MyCommonGuiMovePopUp"] != null && objMesh["MyCommonGuiMovePopUp"] != undefined) {
+                    myCommonGuiMovePopUpBool = objMesh["MyCommonGuiMovePopUp"];
+                }
+
+                // // 更新堆叠,重置排序顺序[发现没啥用]距离越近的,则排序更高
+                // objAdvancedDynamicTexture.rootContainer.zIndex = 1000000 - parseInt(distance * 1000);
+
+                // if (
+                //     myCommonGuiMovePopUpBool == true
+                // ) {
+                //     console.log("myCommonGuiMovePopUpBool", myCommonGuiMovePopUpBool, objMesh.id);
+                // }
+                
+                if (
+                    // 如果是需要变成隐藏 或者变成点位
+                    cameraRadiusBool == false
+                    && myCommonGuiMovePopUpBool == false
+                    && objMesh["myCommonGuiDbListType"] != 0
+                ) {
+                    
+                    // console.log("是需要变成隐藏 或者变成点位", key, objAddOrUpdateJson);
+
+                    this.addOrUpdate(
+                        objAddOrUpdateJson.code,
+                        objAddOrUpdateJson.position,
+                        objAddOrUpdateJson.scaling,
+                        -1,
+                        -1,
+                        objAddOrUpdateJson.myJson,
+                        objAddOrUpdateJson.callback,
+                        objAddOrUpdateJson.list,
+                        true
+                    );
+                    
+                    objMesh["myCommonGuiDbListType"] = 0;
+                }
+                else if (
+                    (
+                        // 如果是正常显示数据
+                        cameraRadiusBool == true
+                        // 鼠标放在上方展示数据
+                        || myCommonGuiMovePopUpBool == true
+                    )
+                    && objMesh["myCommonGuiDbListType"] != 1
+                ) {
+
+                    // console.log("正常显示数据", key, objAddOrUpdateJson);
+                    
+                    this.addOrUpdate(
+                        objAddOrUpdateJson.code,
+                        objAddOrUpdateJson.position,
+                        objAddOrUpdateJson.scaling,
+                        objAddOrUpdateJson.width,
+                        objAddOrUpdateJson.height,
+                        objAddOrUpdateJson.myJson,
+                        objAddOrUpdateJson.callback,
+                        objAddOrUpdateJson.list,
+                        true
+                    );
+
+                    objMesh["myCommonGuiDbListType"] = 1;
+                }
+
+
+            }
+            
+        }
+        
+        return this;
+    }
+
+    
+    
+}
+
+
+
+
+
+
+
+
+
+
+