emacroh5lib 1.0.81 → 1.0.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {

package/src/views/ModelViewer/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
     <div class="duo-viewer-mask">
-      <div id="WebGL-output" class="duo-viewer-mask__image" :style="viewerStyle()">
+      <div id="WebGL-output" class="duo-viewer-mask__image" :style="viewerStyle()" v-loading="loading"
+        element-loading-text="模型加载中" element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)">
       </div>
     </div>
     <div class="duo-viewer-footer" v-if="showThumbnail">
@@ -57,7 +59,7 @@
   import { AsciiEffect } from "three/examples/jsm/effects/AsciiEffect.js";
   import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 
-  import { Message } from 'element-ui'
+  import { Message, MessageBox } from 'element-ui'
 
   // import TWEEN from "@tweenjs/tween.js";
   // import Stats from "stats.js";
@@ -73,6 +75,7 @@
         index: 0,
         imgUrl: "",
         isCreatePoster: false,
+        loading: true,
         gl: {
           scene: null,
           renderer: null,
@@ -144,6 +147,7 @@
     watch: {
       show(val) {
         if (val) {
+          this.loading = true
           this.$emit("open");
           this.index = this.currentIndex;
           this.loadModel(this.currentModel)
@@ -154,6 +158,9 @@
     },
     mounted() {
 
+      // this.show = true
+     
+
 
       // Message.success("按键提示 ");
 
@@ -363,8 +370,6 @@
 
       setObject() {
 
-
-
         const materials = this.gl.materials
         const geometry = this.gl.geometry
         const camera = this.gl.camera
@@ -382,12 +387,11 @@
         let box = new THREE.Box3().setFromObject(geometry);
         let center = box.getCenter(geometry.position);
         let size = box.getSize(new THREE.Vector3())
-
         const ratio = Math.abs(200 / size.x);
         geometry.scale.set(ratio, ratio, ratio);
 
 
-
+        // 设置旋转点
         const boxHelper = new THREE.BoxHelper(geometry);
         this.gl.boxHelper = boxHelper
         boxHelper.geometry.computeBoundingBox()
@@ -400,6 +404,8 @@
         this.gl.geometry = pivot
         scene.add(pivot);
 
+        this.loading = false
+
 
 
 
@@ -630,8 +636,6 @@
 
 
 
-
-
                 // return
 
 
@@ -682,9 +686,6 @@
                 // );
 
 
-
-
-
                 // geometry.computeVertexNormals();
                 // geometry.center();
                 // let material = new THREE.MeshPhongMaterial({ color: 0xffff00, shading: THREE.SmoothShading });
@@ -692,23 +693,37 @@
 
                 // const box = new THREE.BoxHelper(mesh, 0xffff00);
 
-                // console.log("尺寸", box);
-
 
                 // var scale = this.computeScale(geometry);
                 // mesh.scale.multiplyScalar(scale);
                 // mesh.position.set(0, 0, 0);
                 // this.gl.scene.add(mesh); 
-
               }
-
-
-
-
-
-
+            }, progress => {
+            }, error => {
+              Message({
+                message: objPath + '加载出错',
+                type: 'error',
+                duration: 0,
+                showClose: true
+              })
+
+              setTimeout(() => {
+                this.show = false
+              }, 1000);
+            })
+          }, progress => {
+          }, error => {
+            Message({
+              message: mtlPath + '加载出错',
+              type: 'error',
+              duration: 0,
+              showClose: true
             })
 
+            setTimeout(() => {
+              this.show = false
+            }, 1000);
           })
 
         }
@@ -865,8 +880,6 @@
               // gl.geometry.rotateX(new THREE.Vector3(1, 0, 0), 90)
 
             }
-
-
             if (event.key == 'y') {
 
               // gl.camera.position.set(0, 0, 0);
@@ -884,7 +897,6 @@
 
               gl.axialDirection = yd > 0 ? 'y' : '-y';
             }
-
             if (event.key == 'z') {
 
               const zd = gl.camera.position.z !== 0 ? -gl.camera.position.z : -d
@@ -897,7 +909,6 @@
 
               gl.axialDirection = zd > 0 ? 'z' : '-z';
             }
-
             if (event.key == '=') {
               gl.pointLight.intensity += 0.2
             }
@@ -917,12 +928,17 @@
               // const d = (0 * Math.PI) / 180;
               // gl.axisHelper.rotation.set(d, 0, 0);
 
-              gl.camera.position.set(500, 300, 200); //设置相机位置
-              gl.camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向（指向的场景对象）
-              gl.pointLight.position.set(200, 300, 100); //点光源位置,参数分别代表：
-              gl.ambient.position.set(200, 300, 100); //点光源位置,参数分别代表：
+              // gl.camera.position.set(500, 300, 200); //设置相机位置
+              // gl.camera.lookAt(new THREE.Vector3(0, 0, 0)); //设置相机方向（指向的场景对象）
+              // gl.pointLight.position.set(200, 300, 100); //点光源位置,参数分别代表：
+              // gl.ambient.position.set(200, 300, 100); //点光源位置,参数分别代表：
 
-              gl.scene.rotateX(THREE.Math.degToRad(90))
+              // gl.scene.rotateX(THREE.Math.degToRad(90))
+
+              gl.camera.position.set(d, d, d);
+              gl.camera.lookAt(new THREE.Vector3(0, 0, 0));
+
+              gl.axialDirection = 'o'
             }
 
 
@@ -988,6 +1004,8 @@
 
             if (gl.isRotate) {
 
+              // console.log("旋转", event);
+
               const x = -(gl.startEvent.offsetX - event.offsetX)
               const y = -(gl.startEvent.offsetY - event.offsetY)
 
@@ -1034,6 +1052,14 @@
                 }
               }
 
+              if (gl.axialDirection == 'o') {
+                if (Math.abs(x) > Math.abs(y)) {
+                  gl.geometry.rotateOnWorldAxis(new THREE.Vector3(1, 1, 1), x * 0.001)
+                } else {
+                  gl.geometry.rotateOnWorldAxis(new THREE.Vector3(1, 1, 1), y * 0.001)
+                }
+              }
+
               // gl.geometry.rotateX(x * 0.001)
               // gl.geometry.rotateY(y * 0.001)
 
@@ -1094,6 +1120,14 @@
                 }
               }
 
+              if (gl.axialDirection == 'o') {
+                if (Math.abs(x) > Math.abs(y)) {
+                  gl.geometry.position.set(gl.geometry.position.x + x, gl.geometry.position.y + x, gl.geometry.position.z + x)
+                } else {
+                  gl.geometry.position.set(gl.geometry.position.x + y, gl.geometry.position.y + y, gl.geometry.position.z + y)
+                }
+              }
+
             }
 
 

package/src/views/TestView/index.vue

@@ -83,8 +83,8 @@
       name: "产品1",
       // mtl: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\test.mtl",
       // obj: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:/SOP/PCB001/test.obj"
-      mtl: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:\\SOP\\File\\book\\test4.mtl",
-      obj: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:\\SOP\\File\\book\\test4.obj"
+      mtl: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:\\SOP\\File\\book\\test7.mtl",
+      obj: "http://www.emacrosys.cn:8019/H5/GetFile?type=0&path=C:\\SOP\\File\\book\\test7.obj"
     }, {
       type: "obj",
       name: "产品2",

package//345/214/205/350/243/205/347/272/277.mtl

@@ -0,0 +1,103 @@
+# WaveFront *.mtl file (generated by Cinema 4D)
+
+newmtl default
+Kd 1 1 1
+
+newmtl 材质.1
+Ka 1 1 1
+Kd 0.12300000339746 0.12884999811649 0.15000000596046
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.10
+Ka 1 1 1
+Kd 0.95999997854233 0.79295998811722 0.12479999661446
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.7
+Ka 1 1 1
+Kd 1 1 1
+Ks 1 1 1
+Ns 90
+illum 7
+
+newmtl 材质.4
+Ka 1 1 1
+Kd 0.9200000166893 0.9200000166893 0.9200000166893
+Ks 1 1 1
+Ns 4
+illum 7
+
+newmtl 材质.2
+Ka 1 1 1
+Kd 0.87000000476837 0.21750000119209 0.21750000119209
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.9
+Ka 1 1 1
+Kd 1 1 1
+Ks 0.68000000715256 0.59273332357407 0.30599999427795
+Ns 90
+illum 7
+
+newmtl 材质.5
+Ka 1 1 1
+Kd 0.23275999724865 0.200100004673 0.68999999761581
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.6
+Ka 1 1 1
+Kd 1 1 1
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.8
+Ka 1 1 1
+Kd 0.75999999046326 0.37873333692551 0.22800000011921
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质
+Ka 1 1 1
+Kd 0.62999999523163 0.62999999523163 0.62999999523163
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.1
+Ka 1 1 1
+Kd 0.15639999508858 0.15934666991234 0.17000000178814
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质
+Ka 1 1 1
+Kd 0.78200000524521 0.79673331975937 0.85000002384186
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.10
+Ka 1 1 1
+Kd 0.95999997854233 0.79295998811722 0.12479999661446
+Ks 1 1 1
+Ns 50
+illum 7
+
+newmtl 材质.3
+Ka 1 1 1
+Kd 0.88999998569489 0.82770001888275 0.14239999651909
+Ks 1 1 1
+Ns 50
+illum 7
+