* 模型时序加载阻塞bug

ems-ui-cloud/src/views/largeScreen/center.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="width: 100%;height: 100%">
     <CusTabs :tabs="areaTabs" :dropDown="true" @room-click="roomClick" :active.sync="areaType"
-      @tab-click="areaTabClick" />
+             @tab-click="areaTabClick"/>
     <div class="center" id="model">
 
     </div>
@@ -24,7 +24,7 @@ const areaEnums = {
 };
 export default {
   name: 'Center',
-  data () {
+  data() {
     return {
       areaType: 'all',
       areaTabs: [
@@ -42,20 +42,20 @@ export default {
   components: {
     CusTabs
   },
-  mounted () {
+  mounted() {
     this.initThree();
   },
   methods: {
     ...mapMutations('userState', ['setAreaType']),
-    roomClick (value) {
+    roomClick(value) {
       this.roomActive = value
       if (this.roomActive && (this.areaType == '1' || this.areaType == '2')) {
-        this.modelApi.modelChange(`model${this.roomActive}`,areaEnums[this.areaType])
+        this.modelApi.modelChange(`model${this.roomActive}`, areaEnums[this.areaType])
       } else {
         this.modelApi.modelChange('model')
       }
     },
-    areaTabClick () {
+    areaTabClick() {
       this.roomActive = ''
       this.modelApi.controlRotate(false)
       this.setAreaType(areaEnums[this.areaType].value)
@@ -82,15 +82,12 @@ export default {
           targetContent: {x: -17.701772776272723, y: -307.6331500346563, z: 148.44436360369687}, // 控制器目标焦点
           time: 1000 // 动画时间
         };
-        this.modelApi.flyTo(target,0.8)
+        this.modelApi.flyTo(target, 0.8)
       }
     },
-    initThree () {
-     setTimeout(() => {
-       this.modelApi = new renderModel('#model')
-      this.modelApi.init()
-     }, 100);
-      setTimeout(() => {
+    initThree() {
+      this.modelApi = new renderModel('#model')
+      this.modelApi.init(() => {
         this.modelApi.addDialog(ComponentHandle.createComponent({
           component: pvReal,
           props: {
@@ -152,7 +149,7 @@ export default {
           y: -140,
           z: 20
         })
-      }, 2000);
+      })
     }
   }
 }

ems-ui-cloud/src/views/largeScreen/three/renderModel.js

@@ -134,7 +134,7 @@ class renderModel {
   }
 
   // 初始化加载模型方法
-  init() {
+  init(loaded) {
     //初始化场景
     this.initScene();
     //初始化相机
@@ -146,7 +146,7 @@ class renderModel {
     //初始化控制器，控制摄像头,控制器一定要在渲染器后
     this.initControls();
 
-    this.setFBXModel();
+    this.setFBXModel(loaded);
     this.setRoomModel();
     //监听场景大小改变，跳转渲染尺寸
     window.addEventListener('resize', this.onWindowResizes.bind(this));
@@ -296,8 +296,6 @@ class renderModel {
     this.controls.update();
     this.css3DRenderer.render(this.scene, this.camera);
     TWEEN.update();
-    console.log(this.camera.position);
-    console.log(this.controls.target);
     if (this.model && this.autoRotate) {
       this.model.rotation.z += 0.001; // 每帧绕y轴旋转0.01弧度
     }
@@ -416,7 +414,7 @@ class renderModel {
     });
   }
 
-  setFBXModel() {
+  setFBXModel(loaded) {
     var fbxLoader = new GLTFLoader();
     fbxLoader.load('/models/main.glb', object => {
       this.calcMeshCenter(object.scene);
@@ -436,6 +434,7 @@ class renderModel {
       this.camera.lookAt(0, 0, 0);
       // 将模型添加到场景中去
       this.scene.add(this.model);
+      loaded&&loaded()
     });
   }
   setModelDisplay(type, areaInfo) {