update

src/components/student/ThreeWorldEvent/common/ComVal.ts

@@ -16,6 +16,17 @@ export class ComVal {
      * stores 合集对象
      */
     public storesObj : any = null;
+
+    /**
+     * 追加自定义的帧事件
+     */
+    public fpsEvent : any = [
+        // {
+        //     "code" : "自定义code，后续用于删除指定的code",
+        //     "myDb" : "自定义的回调的数据",
+        //     "callback" : "自定义回调的方法",
+        // }
+    ];
     
     static instance: any;
 
@@ -57,9 +68,125 @@ export class ComVal {
     }
     
 
+    
+    /**
+     * 该方法每帧会被执行
+     * 用于处理自定义的 this.fpsEvent json列表
+     */
+    fpsEventMain = () => {
+        
+        var thisTime = new Date().getTime();
+
+        for (let i = 0; i < this.fpsEvent.length; i++) {
+
+            let obj = this.fpsEvent[i];
+            let code = obj["code"];
+            let myDb = obj["myDb"];
+            let time = obj["time"];
+            let timeEnd = obj["timeEnd"];
+            let callback = obj["callback"];
+
+            // 是否触发回调
+            let callbackBool = false;
+
+            if (time == null || time == undefined) {
+                callbackBool = true;
+            } else {
+
+                let timeNew = parseFloat(time);
+                if (thisTime - timeEnd >= timeNew) {
+                    callbackBool = true;
+                    this.fpsEvent[i]["timeEnd"] = thisTime;
+                }
+                
+            }
+            
+            if (callbackBool == true) {
+                callback({
+                    "code" : code,
+                    "myDb" : myDb,
+                    "time" : time,
+                    "timeEnd" : timeEnd
+                });
+            }
+            
+        }
+
+        return this;
+
+    }
+
+
+    /**
+     * 新增一个自定义的帧事件
+     * code         自定义的唯一code值
+     * myDb         自定义回调的数据，可以是字符串，也可以是json对象等方式
+     * time         间隔多少毫秒执行一次，如果传null则为每帧执行
+     * callback     自定义的回调方法
+     * 
+     * ########## 使用案例 ##########
+     * 
+     *  // 每帧执行案例
+     *  ComVal.find().fpsEventAdd(
+     *      "code111", "自定义返回111", null, function(fpsEventAddRet) {
+     *          console.log(
+     *              "fpsEventAddRet", fpsEventAddRet
+     *          );
+     *      }
+     *  );
+     * 
+     *  // 每次2秒执行案例
+     *  ComVal.find().fpsEventAdd(
+     *      "code222", "自定义返回222", 2000, function(fpsEventAddRet) {
+     *          console.log(
+     *              "fpsEventAddRet", fpsEventAddRet
+     *          );
+     * 
+     *          // 删除释放帧事件
+     *          ComVal.find().fpsEventDel(fpsEventAddRet.code);
+     * 
+     *      }
+     *  );
+     * 
+     */
+    fpsEventAdd = (code : any, myDb : any, time : any, callback : any) => {
+        
+        var thisTime = new Date().getTime();
+
+        let addJson : any = {
+            "code" : code,
+            "myDb" : myDb,
+            "time" : time,
+            // 记录最后一次执行的时间戳， 与 time 配合执行
+            "timeEnd" : thisTime,
+            "callback" : callback,
+        }
+
+        this.fpsEvent.push(addJson);
+
+        return this;
+    }
+
+    /**
+     * 删除自定义回调帧事件
+     * objCode          自定义的 this.fpsEvent 唯一code值
+     */
+    fpsEventDel = (objCode : any) => {
+
+        for (let i = 0; i < this.fpsEvent.length; i++) {
+            let obj = this.fpsEvent[i];
+            let code = obj["code"];
+            if (code == objCode) {
+                this.fpsEvent.splice(i, 1);
+                // return this;
+            }
+        }
+
+        return this;
+    }
+
 
 
-    
     
 
 }

src/components/student/ThreeWorldEvent/event/TypeEvent.ts

@@ -1,3 +1,5 @@
+import { ComVal } from '../common/ComVal.ts';
+
 /**
  * 根据传来不同的类型操作三维不同的逻辑
  */
@@ -80,8 +82,12 @@ export class TypeEvent {
 
             // 初始化第一个步骤视角
             case 'threeWorld_one_init':
+
+                ComVal.find().fpsEventAdd("threeWorld_one_init", {}, 1500, function(fpsEventAddRet : any) {
+                    ComVal.find().fpsEventDel(fpsEventAddRet.code);
+                    thisClass.threeWorld_one_init();
+                });
                 
-                thisClass.threeWorld_one_init();
                 break;
                 
             // 设备拆解

src/components/student/ThreeWorldEvent/js/ThreeWorldEvent.ts

@@ -1,3 +1,5 @@
+import { ComVal } from '../common/ComVal.ts';
+
 /**
  * 操作 3d场景 相关事件
  */
@@ -238,6 +240,7 @@ export class ThreeWorldEvent {
         objScene.onBeforeRenderObservable.add(function() {
             
             // console.log("帧事件触发");
+            ComVal.find().fpsEventMain();
             
         });
         

src/view/Manage.vue

@@ -125,7 +125,7 @@
         font-size: 1.5rem;
         line-height: 60px;
         justify-self: flex-start;
-        width: 20rem;
+        width: 30rem;
     }
 
     .header-opts {