emacroh5lib 1.0.69 → 1.0.70

package/dist/emacroh5lib.min.js.LICENSE.txt

@@ -23,6 +23,13 @@
  * Date: 2021-03-02T17:08Z
  */
 
+/*!
+fflate - fast JavaScript compression/decompression
+<https://101arrowz.github.io/fflate>
+Licensed under MIT. https://github.com/101arrowz/fflate/blob/master/LICENSE
+version 0.6.9
+*/
+
 /*! sheetjs (C) 2013-present SheetJS -- http://sheetjs.com */
 
 /*! xlsx.js (C) 2013-present SheetJS -- http://sheetjs.com */

package/package.json

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

package/src/index.ts

@@ -5,11 +5,12 @@ import { EMacro } from "./utilities/File";
 import FileViewer from './views/FileViewer/index.vue'
 import ImageViewer from './views/ImageViewer/index.vue'
 import VideoViewer from './views/VideoViewer/index.vue'
+import ModelViewer from './views/ModelViewer/index.vue'
 import DragResizeView from './views/DragResizeView/index.vue'
 import DragView from './views/Draw/index.vue'
 import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView];
+const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView, ModelViewer];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;
@@ -32,4 +33,4 @@ if (typeof window !== 'undefined' && (window as any).Vue) {
 
 
 export default {}
-export { EMacro, FileViewer, ImageViewer, VideoViewer, DragResizeView }
+export { EMacro, FileViewer, ImageViewer, VideoViewer, ModelViewer, DragResizeView }

package/src/views/ModelViewer/index.vue

@@ -0,0 +1,508 @@
+<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>
+    </div>
+    <div class="duo-viewer-footer" v-if="showThumbnail">
+      <div class="duo-viewer-footer__title">{{ realName }}</div>
+      <div class="duo-viewer-footer__toolbar">
+        <ul>
+          <li class="duo-viewer-footer__zoom-in" data-viewer-action="zoom-in"></li>
+          <li class="duo-viewer-footer__zoom-out" data-viewer-action="zoom-out"></li>
+          <li class="duo-viewer-footer__one-to-one" data-viewer-action="one-to-one"></li>
+          <li class="duo-viewer-footer__prev" data-viewer-action="prev"></li>
+
+          <li class="duo-viewer-footer__play" data-viewer-action="play"></li>
+
+          <li class="duo-viewer-footer__next" data-viewer-action="next"></li>
+          <li class="duo-viewer-footer__reset" data-viewer-action="reset"></li>
+          <li class="duo-viewer-footer__rotate-left" data-viewer-action="rotate-left"></li>
+          <li class="duo-viewer-footer__rotate-right" data-viewer-action="rotate-right"></li>
+        </ul>
+      </div>
+      <div class="duo-viewer-footer__navbar">
+        <div class="duo-viewer-footer__navbar-thumbnail-wrap">
+          <div ref="duoViewerImageThumbnailList" class="duo-viewer-footer__navbar-thumbnail-list"
+            :style="{ width: `${listLength * 34}px` }">
+            <div :key="item + i" v-for="(item, i) in list" :class="
+                    i === index
+                      ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
+                      : 'duo-viewer-footer__navbar-thumbnail-item'
+                  ">
+              <img data-viewer-action="select" :data-viewer-action-index="i" :src="getModelImg(item, i)" :alt="alt"
+                class="duo-viewer-footer__navbar-thumbnail-image" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="duo-viewer-close" @click="handleClose">
+      <div class="duo-viewer-close__off"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+  import * as THREE from "three";
+  import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
+  import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+  import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+  import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
+  import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+  import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
+  import { Line2 } from 'three/examples/jsm/lines/Line2'
+  import { CSS2DObject, CSS2DRenderer } from "three/examples/jsm/renderers/CSS2DRenderer";
+  import { AsciiEffect } from "three/examples/jsm/effects/AsciiEffect.js";
+  // import TWEEN from "@tweenjs/tween.js";
+  // import Stats from "stats.js";
+  // import * as dat from "dat.gui";
+
+  export default {
+    name: "ModelViewer",
+    data() {
+      return {
+        viewerSrc: "",
+        image: null,
+        listDataCache: [],
+        index: 0,
+        imgUrl: "",
+        isCreatePoster: false,
+        gl: {
+          scene: null,
+          renderer: null,
+          camera: null,
+          controls: null,
+          geometry: null,
+          isRotate: false,
+          isMove: false,
+          startEvent: null,
+          WebGLoutput: null,
+          animationFrame: null
+        }
+      };
+    },
+    props: {
+      list: {
+        type: Array,
+        default: () => [],
+      },
+      alt: {
+        type: String,
+        default: "预览图缺失",
+      },
+      // Control is show of viewer
+      show: {
+        type: Boolean,
+        default: false,
+      },
+      // Default index
+      currentIndex: {
+        type: Number,
+        default: 0,
+      },
+      width: {
+        type: String,
+        default: "80%",
+      },
+      height: {
+        type: String,
+        default: "80%",
+      },
+      showThumbnail: {
+        type: Boolean,
+        default: false,
+      }
+    },
+    computed: {
+      listLength() {
+        return this.list.length;
+      },
+      realName() {
+        return this.list[this.index].name;
+      },
+      currentData() {
+        return this.listDataCache[this.index];
+      },
+      currentModel() {
+        return this.list[this.index];
+      }
+    },
+    watch: {
+      show(val) {
+        if (val) {
+          this.$emit("open");
+          this.index = this.currentIndex;
+          this.loadModel(this.currentModel)
+        } else {
+          this.$emit("close");
+        }
+      },
+    },
+    mounted() {
+
+    },
+    methods: {
+      viewerStyle() {
+        return `width:${this.width};height:${this.height};`
+      },
+      getModelImg(item) {
+
+      },
+      // Global init
+      init() {
+        //   this.initMouseWheel();
+        this.keydown();
+      },
+
+      loadModel(model) {
+
+        const loadObj = () => {
+
+          let mtlLoader = new MTLLoader();
+          let objLoader = new OBJLoader();
+
+          // const objPath = "/webgl-resources/test.obj"
+          const mtlPath = model.mtl
+          const objPath = model.obj
+
+          mtlLoader.load(mtlPath, materials => {
+
+            materials.preload();
+            const keys = Object.keys(materials.materials)
+            for (let i = 0; i < keys.length; i++) {
+              materials.materials[keys[i]].opacity = 1 - materials.materials[keys[i]].opacity // 解决tr解析问题
+            }
+            objLoader.setMaterials(materials);
+
+            objLoader.load(objPath, geometry => {
+
+              this.gl.geometry = geometry
+
+              geometry.position.x = 0
+              geometry.position.y = 0
+              geometry.position.z = -100
+
+              geometry.scale.x = 100
+              geometry.scale.y = 100
+              geometry.scale.z = 100
+              geometry.scale.set(200, 200, 200)
+
+              this.gl.scene.add(geometry);
+            })
+
+          })
+
+
+        }
+
+        const init = () => {
+
+          this.gl.scene = new THREE.Scene();
+
+          this.gl.scene.rotateY(45)
+
+
+          let axes = new THREE.AxisHelper(50);
+          this.gl.scene.add(axes);
+
+          //点光源
+          let point = new THREE.PointLight(0xffffff);
+          point.position.set(200, 300, 10); //点光源位置,参数分别代表：
+          this.gl.scene.add(point);
+          //环境光
+          let ambient = new THREE.AmbientLight(0x444444);
+          ambient.position.set(200, 300, 10); //点光源位置,参数分别代表：
+          this.gl.scene.add(ambient);
+          /**
+           * 相机设置
+           */
+          let width = window.innerWidth * 0.8; //窗口宽度
+          let height = window.innerHeight * 0.8; //窗口高度
+          let k = width / height; //窗口宽高比
+          let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
+          //创建相机对象
+          this.gl.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
+          this.gl.camera.position.set(500, 300, 200); //设置相机位置
+          this.gl.camera.lookAt(this.gl.scene.position); //设置相机方向（指向的场景对象）
+          /**
+           * 创建渲染器对象
+           */
+          this.gl.renderer = new THREE.WebGLRenderer();
+          this.gl.renderer.setSize(width, height); //设置渲染区域尺寸
+          this.gl.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
+
+          this.gl.WebGLoutput.innerHTML = ""
+          this.gl.renderer.domElement.style.width = "100%"
+          this.gl.renderer.domElement.style.height = "100%"
+          this.gl.WebGLoutput.appendChild(this.gl.renderer.domElement);//body元素中插入canvas对象
+
+          // controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
+          // controls.addEventListener("change", render); //监听鼠标、键盘事件
+
+          this.gl.renderer.domElement.addEventListener("click", event => {
+            console.log("click", event);
+          })
+
+          this.gl.renderer.domElement.addEventListener("dblclick", event => {
+            console.log("dblclick", event);
+          })
+
+          this.gl.renderer.domElement.addEventListener("mousedown", event => {
+            console.log("mousedown", event);
+
+            if (event.which === 1) {
+              this.gl.isRotate = true
+              this.gl.startEvent = event
+            }
+
+            if (event.which === 3) {
+              this.gl.isMove = true
+              this.gl.startEvent = event
+            }
+
+          })
+
+          this.gl.renderer.domElement.addEventListener("mouseup", event => {
+            console.log("mouseup", event);
+            this.gl.isRotate = false
+            this.gl.isMove = false
+          })
+
+
+          this.gl.renderer.domElement.addEventListener("contextmenu", event => {
+            console.log("mouseup", event);
+            event.preventDefault();
+          })
+
+          this.gl.renderer.domElement.addEventListener("mousewheel", event => {
+            console.log("mousewheel", event);
+            event.preventDefault();
+
+            let velocity = 0.1
+            if (event.wheelDelta > 0) {
+              velocity = 1 - velocity
+              this.gl.geometry.scale.set(this.gl.geometry.scale.x * velocity, this.gl.geometry.scale.y * velocity, this.gl.geometry.scale.z * velocity)
+            } else {
+              velocity = 1 + velocity
+              this.gl.geometry.scale.set(this.gl.geometry.scale.x * velocity, this.gl.geometry.scale.y * velocity, this.gl.geometry.scale.z * velocity)
+            }
+
+          })
+
+          this.gl.renderer.domElement.addEventListener("mousemove", event => {
+            if (this.gl.isRotate) {
+
+              const x = -(this.gl.startEvent.offsetX - event.offsetX)
+              const y = -(this.gl.startEvent.offsetY - event.offsetY)
+
+              this.gl.geometry.rotateOnWorldAxis(new THREE.Vector3(1, 0, 0), y * 0.001)
+              this.gl.geometry.rotateOnWorldAxis(new THREE.Vector3(0, 1, 0), x * 0.001)
+              // this.gl.geometry.rotateX(y * 0.001)
+              // this.gl.geometry.rotateY(x * 0.001)
+            }
+
+            if (this.gl.isMove) {
+              const x = -(this.gl.startEvent.offsetX - event.offsetX) * 0.05
+              const y = (this.gl.startEvent.offsetY - event.offsetY) * 0.05
+              this.gl.geometry.position.set(this.gl.geometry.position.x + x, this.gl.geometry.position.y + y, this.gl.geometry.position.z)
+            }
+
+          })
+
+        }
+
+        const render = () => {
+          this.gl.renderer.render(this.gl.scene, this.gl.camera);
+          this.gl.animationFrame = requestAnimationFrame(render);
+        }
+
+        this.$nextTick(() => {
+          this.gl.WebGLoutput = document.querySelector("#WebGL-output");
+          init();
+          render();
+          loadObj();
+        })
+
+
+      },
+
+
+
+      // Next or prev action
+      switchAction(a) {
+        let lastIndex = this.index;
+        switch (a) {
+          case "prev":
+            // prev action
+            this.index += this.index <= 0 ? 0 : -1;
+            break;
+          case "next": {
+            // next action
+            let srcListLength = this.listLength - 1;
+
+            this.index +=
+              this.index >= srcListLength ? srcListLength - this.index : 1;
+          }
+            break;
+          default:
+            this.index = +a;
+            break;
+        }
+        this.judgeThumbnailListMove(lastIndex, this.index);
+
+      },
+      // To judge thumbnail list move
+      judgeThumbnailListMove(lastIndex, index) {
+        if (lastIndex == index) return;
+
+        let translateX = 0,
+          lastTransform = 0,
+          step = index - lastIndex,
+          move = step * 34,
+          length = this.listLength,
+          target = this.$refs["duoViewerImageThumbnailList"];
+
+        if (!target) return;
+
+        lastTransform = this.getCurrentTransform(target);
+
+        if (lastTransform) {
+          translateX = Math.abs(+lastTransform.translateX);
+        }
+
+        this.setTransform(target, {
+          scaleX: "1",
+          skewY: "0",
+          translateX: `-${translateX + move}px`,
+          translateY: "0%",
+          rotate: "0deg",
+        });
+      },
+
+
+      // FullScreen action
+      requestFullScreen() {
+        let element = this.$refs["duoViewer"],
+          requestMethod =
+            element.requestFullScreen ||
+            element.webkitRequestFullScreen ||
+            element.mozRequestFullScreen ||
+            element.msRequestFullScreen;
+
+        if (requestMethod) {
+          requestMethod.call(element);
+        }
+      },
+
+      // Keydown action
+      keydown() {
+        window.addEventListener("keydown", (e) => {
+          e = event || window.event
+
+          if (e && e.keyCode == 40) {
+            // down
+            this.zoom("out");
+          }
+          if (e && e.keyCode == 37) {
+            // left
+            this.switchAction("prev");
+          }
+          if (e && e.keyCode == 39) {
+            // right
+            this.switchAction("next");
+          }
+          if (e && e.keyCode == 38) {
+            // up
+            this.zoom("in");
+          }
+          if (e && e.keyCode == 27) {
+            // esc
+            this.handleClose()
+          }
+        });
+      },
+
+      // Init mouse wheel event
+      initMouseWheel() {
+        const scrollFn = (e) => {
+          e = e || window.event;
+          if (e.wheelDelta) {
+            // for IE/Google
+            if (e.wheelDelta > 0) {
+              this.zoom("out");
+            }
+            if (e.wheelDelta < 0) {
+              this.zoom("in");
+            }
+          } else if (e.detail) {
+            // for Firefox
+            if (e.detail > 0) {
+              this.zoom("out");
+            }
+            if (e.detail < 0) {
+              this.zoom("in");
+            }
+          }
+        };
+
+        document.addEventListener &&
+          document.addEventListener("DOMMouseScroll", scrollFn, false);
+        window.onmousewheel = document.onmousewheel = scrollFn;
+      },
+
+      // Agent
+      clickAgent(e) {
+        switch (e.target.getAttribute("data-viewer-action")) {
+          case "zoom-in":
+            this.zoom("in");
+            break;
+          case "zoom-out":
+            this.zoom("out");
+            break;
+          case "one-to-one":
+            this.resetZoom();
+            break;
+          case "prev":
+            this.switchAction("prev");
+            break;
+          case "play":
+            this.requestFullScreen();
+            break;
+          case "next":
+            this.switchAction("next");
+            break;
+          case "reset":
+            this.resetAll();
+            break;
+          case "select":
+            this.switchAction(e.target.getAttribute("data-viewer-action-index"));
+            break;
+          case "rotate-left":
+            this.rotate("left");
+            break;
+          case "rotate-right":
+            this.rotate("right");
+            break;
+        }
+      },
+      // On close
+      handleClose() {
+
+        cancelAnimationFrame(this.gl.animationFrame)
+
+        const keys = Object.keys(this.gl)
+        for (let i = 0; i < keys.length; i++) {
+          this.gl[keys[i]] = null
+        }
+        this.$emit("update:show", false);
+      },
+    },
+  };
+</script>
+
+<style lang="less" scoped>
+  @import "./style/css/index.css";
+  /* @import "./style/css/index.less"; */
+</style>