@vuemap/vue-amap-extra/lib/packages/ThreeVideo/ThreeVideo.js

@vuemap/vue-amap扩展库，包含threejs相关图层

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var three = require('three');
var lodashEs = require('lodash-es');
var threeUtil = require('../../utils/threeUtil.js');

var __defProp = Object.defineProperty;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __publicField = (obj, key, value) => {
  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  return value;
};
class ThreeVideo {
  constructor(layer) {
    __publicField(this, "object");
    // group对象
    __publicField(this, "animations");
    // 模型的动画
    __publicField(this, "layer");
    // threejs的图层对象
    __publicField(this, "video");
    __publicField(this, "videoMesh");
    //视频
    __publicField(this, "bgMesh");
    //背景
    __publicField(this, "canvasTexture");
    __publicField(this, "videoFrame", -1);
    __publicField(this, "rotateFun");
    this.layer = layer;
  }
  init(options, $vue) {
    this.video = options.video;
    this.object = new three.Group();
    this.object.isCustomGroup = true;
    this.object.$vue = $vue;
    return new Promise((resolve) => {
      var _a, _b, _c, _d, _e;
      (_a = this.video) == null ? void 0 : _a.load();
      (_b = this.video) == null ? void 0 : _b.play();
      const texture = new three.VideoTexture(this.video);
      const geometry = new three.PlaneGeometry(options.videoWidth || ((_c = this.video) == null ? void 0 : _c.videoWidth), options.videoHeight || ((_d = this.video) == null ? void 0 : _d.videoHeight));
      const material = new three.MeshPhongMaterial({
        map: texture,
        // 设置纹理贴图
        side: three.DoubleSide,
        transparent: true,
        depthTest: false
      });
      const mesh = new three.Mesh(geometry, material);
      mesh.renderOrder = 3;
      mesh.rotation.y = Math.PI;
      mesh.name = "video";
      this.videoMesh = mesh;
      this.object.add(mesh);
      this.setVideoTranslate(options.videoTranslate);
      this.setPosition(options.position);
      this.setRotation(options.rotation);
      this.setScale(options.scale);
      this.setAltitude(options.altitude);
      (_e = this.layer) == null ? void 0 : _e.add(this.object);
      this.videoAnimate();
      this.addBgCanvas(options.canvas);
      this.setAngle(options.angle);
      this.setOpacity(options.opacity);
      this.setzIndex(options.zIndex || 0);
      this.bindAlwaysFront(options.alwaysFront);
      resolve();
    });
  }
  bindAlwaysFront(alwaysFront) {
    var _a;
    if (alwaysFront) {
      const map = (_a = this.layer) == null ? void 0 : _a.getMap();
      this.rotateFun = lodashEs.bind(this._changeMapRotate, this);
      map.on("rotatechange", this.rotateFun);
    }
  }
  unBindAlwaysFront() {
    var _a;
    if (this.rotateFun) {
      const map = (_a = this.layer) == null ? void 0 : _a.getMap();
      if (map) {
        map.off("rotatechange", this.rotateFun);
      }
    }
  }
  _changeMapRotate() {
    var _a;
    const map = (_a = this.layer) == null ? void 0 : _a.getMap();
    const rotate = map.getRotation();
    this.setAngle(rotate);
  }
  addBgCanvas(canvas) {
    if (!canvas) {
      return;
    }
    const texture = new three.CanvasTexture(canvas);
    const geometry = new three.PlaneGeometry(canvas.width, canvas.height);
    const material = new three.MeshPhongMaterial({
      map: texture,
      // 设置纹理贴图
      side: three.DoubleSide,
      transparent: true,
      depthTest: false
    });
    const mesh = new three.Mesh(geometry, material);
    mesh.name = "bg";
    mesh.renderOrder = 1;
    this.object.add(mesh);
    this.canvasTexture = texture;
    this.bgMesh = mesh;
  }
  videoAnimate() {
    this.videoFrame = requestAnimationFrame(() => {
      this.videoAnimate();
    });
    if (this.canvasTexture) {
      this.canvasTexture.needsUpdate = true;
    }
    this.refresh();
  }
  cancelCanvasTextureAnimate() {
    if (this.videoFrame > 0) {
      cancelAnimationFrame(this.videoFrame);
    }
  }
  setScale(scale) {
    let scaleArray;
    if (typeof scale === "number") {
      scaleArray = [scale, scale, scale];
    } else {
      scaleArray = scale;
    }
    this.object.scale.set(...scaleArray);
  }
  setPosition(position) {
    var _a;
    const positionConvert = (_a = this.layer) == null ? void 0 : _a.convertLngLat(position);
    this.object.position.setX(positionConvert[0]);
    this.object.position.setY(positionConvert[1]);
    this.refresh();
  }
  setRotation(rotation) {
    if (rotation) {
      const x = Math.PI / 180 * (rotation.x || 0);
      const y = Math.PI / 180 * (rotation.y || 0);
      const z = Math.PI / 180 * (rotation.z || 0);
      this.object.rotation.set(x, y, z);
      this.refresh();
    }
  }
  setVideoTranslate(translate) {
    if (translate) {
      this.videoMesh.translateX(translate.x);
      this.videoMesh.translateY(translate.y);
      this.videoMesh.translateZ(translate.z);
      this.refresh();
    }
  }
  setAltitude(altitude) {
    if (altitude !== void 0) {
      this.object.position.setZ(altitude);
      this.refresh();
    }
  }
  setAngle(angle) {
    if (angle !== void 0) {
      const x = this.object.rotation.x;
      const z = this.object.rotation.z;
      const y = Math.PI / 180 * angle;
      this.object.rotation.set(x, y, z);
      this.refresh();
    }
  }
  setOpacity(opacity) {
    this.videoMesh.material.opacity = opacity;
    if (this.bgMesh) {
      this.bgMesh.material.opacity = opacity;
    }
    this.refresh();
  }
  setzIndex(zIndex) {
    this.object.renderOrder = zIndex;
  }
  refresh() {
    var _a;
    (_a = this.layer) == null ? void 0 : _a.update();
  }
  show() {
    this.object.visible = true;
    this.refresh();
  }
  hide() {
    this.object.visible = false;
    this.refresh();
  }
  start() {
    var _a;
    (_a = this.video) == null ? void 0 : _a.play();
  }
  pause() {
    var _a;
    (_a = this.video) == null ? void 0 : _a.pause();
  }
  remove() {
    var _a;
    if (this.object) {
      (_a = this.layer) == null ? void 0 : _a.remove(this.object);
      this.unBindAlwaysFront();
    }
  }
  destroy() {
    this.cancelCanvasTextureAnimate();
    this.unBindAlwaysFront();
    if (this.object) {
      this.object.$vue = null;
      threeUtil.clearGroup(this.object);
      this.video = void 0;
      this.videoMesh = void 0;
      this.bgMesh = void 0;
      this.canvasTexture = void 0;
      this.rotateFun = void 0;
      this.object = null;
      this.layer = void 0;
    }
  }
}

exports.default = ThreeVideo;
//# sourceMappingURL=ThreeVideo.js.map