3d 新增视图控制操作 toolbutton

src/views/yhlywsytst/yhlywsytst/index.vue

@@ -7,6 +7,18 @@
     <div class="bigTitle">
       一回路异物溯源态势图
     </div>
+    <!-- 视角工具栏-->
+    <div class="toolButton">
+      <div class="flex1 text-center">
+        <span  @click="reView" ><i class="el-icon-view"></i>重置视角</span>
+      </div>
+      <div class="flex1 text-center">
+        <span @click="viewCenter"  ><i class="el-icon-view"></i>中心视角</span>
+      </div>
+      <div class="flex1 text-center">
+        <span @click="clearSelected"  ><i class="el-icon-circle-close"></i>清除选中</span>
+      </div>
+    </div>
     <!-- 左侧操作边框-->
     <!--  <div class="leftOpt">
       <div class="full padding5" style="padding-top: 10px;">
@@ -24,8 +36,9 @@
       </div>
     </div> -->
     <!-- 右侧操作边框-->
-   <div class="rightOpt">
-      <div class="full padding5">
+   <div v-show='selectedModel.name' class="rightOpt">
+     <!-- 33% 分割-->
+      <div class="full padding5" style="height: 33%;">
         <!-- title-->
         <div class="optTitle">
             {{selectedModel.name?selectedModel.name+'的':''}}设备信息
@@ -36,8 +49,7 @@
           <i class="bottomL"></i>
           <i class="bottomR"></i>
           <div class="full">
-
-
+            <!-- 一级内容-->
 
           </div>
         </div>
@@ -112,6 +124,20 @@
       }
     },
     methods: {
+      clearSelected(){
+        this.selectedModel={name:''}
+        this.reMaterialQue.forEach(item => {
+          item.revert()
+        })
+
+      },
+      viewCenter(){
+        this.cameraTo(this.viewer.camera.position.x, this.viewer.camera.position.y, this.viewer.camera.position.z,0,0,0)
+      },
+      reView(){
+        this.cameraTo(0, 32, -82,0,0,0)
+
+      },
       init() {
         this.viewer = new Viewer('container',this)
         this.viewer.camera.position.set(0, 32, -82)
@@ -149,6 +175,15 @@
         this.modelLoader.loadModelToScene('/glb/all.glb', (model) => {
           model.object.position.set(-42, -10, 0)
           model.object.scale.set(1, 1, 1)
+        },(num)=>{
+          let showNum=num*100
+          if(showNum==100){
+              this.loadingText=`模型加载完毕,请稍等!`
+          }else{
+             this.loadingText=`正在加载模型${showNum}%!`
+          }
+          /* */
+
         })
       },
       loadDm(){
@@ -320,6 +355,22 @@
     height: 85%;
     z-index: 12;
   }
+  .toolButton{
+    display: flex;
+    margin-top: 18px;
+    position: absolute;
+    right: 100px;
+    z-index: 12;
+    height: 40px;
+    line-height: 40px;
+    min-width: 250px;
+    color: #26c6f0;
+    font-size: 13px;
+    // background-color: #07417a;
+  }
+  .toolButton span{
+    cursor: pointer;
+  }
 
   .leftOpt {
     position: absolute;