emacroh5lib 1.0.81 → 1.0.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.81",
+  "version": "1.0.84",
   "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,
@@ -125,6 +128,10 @@
       showThumbnail: {
         type: Boolean,
         default: false,
+      },
+      background: {
+        type: Number,
+        default: 0xb9d3ff,
       }
     },
     computed: {
@@ -144,6 +151,7 @@
     watch: {
       show(val) {
         if (val) {
+          this.loading = true
           this.$emit("open");
           this.index = this.currentIndex;
           this.loadModel(this.currentModel)
@@ -154,6 +162,9 @@
     },
     mounted() {
 
+      // this.show = true
+
+
 
       // Message.success("按键提示 ");
 
@@ -356,15 +367,15 @@
 
       // 计算空间两点中点
       getCenterPosition(A, B) {
-        let pos = { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2, z: (A.z + B.z) / 2 }
-        return pos
+        if (A.z == null || B.z == null) {
+          return { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2 }
+        }
+        return { x: (A.x + B.x) / 2, y: (A.y + B.y) / 2, z: (A.z + B.z) / 2 }
       },
 
 
       setObject() {
 
-
-
         const materials = this.gl.materials
         const geometry = this.gl.geometry
         const camera = this.gl.camera
@@ -382,12 +393,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()
@@ -397,9 +407,17 @@
         geometry.position.z += (-centerPoint.z)
         geometry.position.x += (-centerPoint.x)
         geometry.position.y += (-centerPoint.y)
-        this.gl.geometry = pivot
+        // this.gl.geometry = pivot
         scene.add(pivot);
 
+        this.loading = false
+
+
+        const keyEvent = new KeyboardEvent('keydown', {
+          bubbles: true, cancelable: true, keyCode: 90
+        });
+        document.dispatchEvent(keyEvent);
+
 
 
 
@@ -630,8 +648,6 @@
 
 
 
-
-
                 // return
 
 
@@ -682,9 +698,6 @@
                 // );
 
 
-
-
-
                 // geometry.computeVertexNormals();
                 // geometry.center();
                 // let material = new THREE.MeshPhongMaterial({ color: 0xffff00, shading: THREE.SmoothShading });
@@ -692,23 +705,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);
           })
 
         }
@@ -719,7 +746,7 @@
 
           // this.gl.scene.rotateY(45)
 
-          let axes = new THREE.AxisHelper(100);
+          let axes = new THREE.AxisHelper(20);
           this.gl.scene.add(axes);
 
           //点光源
@@ -735,8 +762,8 @@
           /**
            * 相机设置
            */
-          let width = window.innerWidth * 0.8; //窗口宽度
-          let height = window.innerHeight * 0.8; //窗口高度
+          let width = window.innerWidth * 0.85; //窗口宽度
+          let height = window.innerHeight * 0.85; //窗口高度
           let k = width / height; //窗口宽高比
           let s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
           //创建相机对象
@@ -748,7 +775,7 @@
            */
           this.gl.renderer = new THREE.WebGLRenderer();
           this.gl.renderer.setSize(width, height); //设置渲染区域尺寸
-          this.gl.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+          this.gl.renderer.setClearColor(this.background, 1); //设置背景颜色
 
           this.gl.WebGLoutput.innerHTML = ""
           this.gl.renderer.domElement.style.width = "100%"
@@ -835,6 +862,20 @@
           })
 
 
+          document.addEventListener("keydown", event => {
+
+            if (event.key == '') {
+              const gl = this.gl
+              const zd = gl.camera.position.z !== 0 ? -gl.camera.position.z : -d
+              gl.camera.position.set(0, 0, zd);
+              gl.camera.lookAt(new THREE.Vector3(0, 0, 0));
+              gl.ambient.position.set(0, 0, zd);
+              gl.pointLight.position.set(0, 0, zd);
+              gl.axialDirection = zd > 0 ? 'z' : '-z';
+            }
+
+          })
+
 
           document.addEventListener("keyup", event => {
 
@@ -865,8 +906,6 @@
               // gl.geometry.rotateX(new THREE.Vector3(1, 0, 0), 90)
 
             }
-
-
             if (event.key == 'y') {
 
               // gl.camera.position.set(0, 0, 0);
@@ -884,7 +923,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 +935,6 @@
 
               gl.axialDirection = zd > 0 ? 'z' : '-z';
             }
-
             if (event.key == '=') {
               gl.pointLight.intensity += 0.2
             }
@@ -917,12 +954,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 +1030,8 @@
 
             if (gl.isRotate) {
 
+              // console.log("旋转", event);
+
               const x = -(gl.startEvent.offsetX - event.offsetX)
               const y = -(gl.startEvent.offsetY - event.offsetY)
 
@@ -1034,6 +1078,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 +1146,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

@@ -27,7 +27,7 @@
     </Draw>
 
     <!-- <video-viewer :list="srcList" :show.sync="showVideoViewer" width="80%" height="80%" /> -->
-    <model-viewer :list="modelList" :show.sync="showModelViewer" width="80%" height="80%" />
+    <model-viewer :list="modelList" :show.sync="showModelViewer" width="80%" height="80%" :background="0xff0000" />
 
   </div>
 </template>
@@ -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
+