xinjiang_army/web/public/static/js/overlay.js

var MathLight = {};
MathLight.RADIANS_PER_DEGREE = Math.PI / 180;
MathLight.DEGREES_PER_RADIAN = 180 / Math.PI;

window.initOverlay = function(THREE) {
  var _planeGeometry = new THREE.PlaneGeometry(
    settings.overlay.width,
    settings.overlay.height,
    1,
    1
  );
  var _boxGeometry = new THREE.BoxBufferGeometry(
    settings.overlay.width,
    settings.overlay.height,
    settings.overlay.depth
  );
  //ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face：  （但是突然ie又播放不了videoTexture）
  var newIndex = [..._boxGeometry.index.array];
  newIndex.splice(4 * 6, 6);
  _boxGeometry.setIndex(
    new THREE.BufferAttribute(new Uint16Array(newIndex), 1)
  );

  var _boxMat = new THREE.MeshBasicMaterial({
    //MeshStandardMaterial
    color: "#eeeeee",
    transparent: !0,
    opacity: 0.8,
  });

  var overlayGroup = new THREE.Object3D();
  player.model.add(overlayGroup);
  overlayGroup.name = "overlayGroup";
  player.overlayGroup = overlayGroup;

  var Overlay = function(info) {
    THREE.Object3D.call(this);
    this.sid = info.sid;
    if (info.media) this.preDeal(info);
    this.build(info);
    this.name = "overlay_" + this.sid;
  };
  Overlay.prototype = Object.create(THREE.Object3D.prototype);

  Overlay.prototype.build = function(info) {
    var plane = new THREE.Mesh(
      _planeGeometry,
      new THREE.MeshBasicMaterial({
        //MeshStandardMaterial
        color: "#00c8af",
        opacity: 0.4,
        transparent: !0,
        polygonOffset: true,
        //是否开启多边形偏移		//ie不开启时blank也不会闪烁
        polygonOffsetFactor: -0.9,
        //多边形偏移因子
        polygonOffsetUnits: -4.0,
        //多边形偏移单位
      })
    );
    plane.renderOrder = 3;
    this.add(plane);
    this.plane = plane;
    if (info.hasBox) {
      this.addBox(true);
    }
    overlayGroup.add(this);

    if (info.media) {
      if (info.media.includes("video")) {
        //var id = "video"+ this.sid    id="${ id }"
        var video = $(
          `<video  controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`
        )[0];

        video.setAttribute("crossOrigin", "Anonymous");
        //要在src设置好前解决跨域
        $(video).on("contextmenu", function() {
          return false;
        });
        //禁止右键点击出

        video.src = manage.dealURL(info.file);
        info.media = video;
        info.type = "video";

        /* video.addEventListener('loadeddata', ()=>{
                    console.log(this.sid + " loaded!!!")
                }) */
        video.volume = 0;
        video.muted = true;
        plane.material.opacity = 1;
      } else if (info.media.includes("photo")) {
        /* var img = new Image();
                 
                img.src = manage.dealURL(info.file) //"https://4dkk.4dage.com/images/images"+Config.projectNum+"/overlay"+this.sid+".jpg?m="+new Date().getTime()
                info.media = img
                 */

        info.type = "photo";
        plane.material.opacity = 0.1;
      }

      plane.material.color = new THREE.Color(1, 1, 1);
    }
    if (info.width == void 0) info.width = settings.overlay.width;
    if (info.height == void 0) info.height = settings.overlay.height;
    this.setFromInfo(info);
    this.fileSrc = info.file;
  };

  Overlay.prototype.setFromInfo = function(info) {
    //1 恢复到编辑之前 2 初始加载
    var plane = this.plane;
    this.transformAtPanos = info.transformAtPanos || {};
    //在每个漫游点独立设置的position。
    //var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
    var curPanoTransform = this.transformAtPanos[this.getTransformSid()] || {};

    info.depth && this.scale.setZ(info.depth / settings.overlay.depth);

    this.posCustom = info.pos ? info.pos.clone() : this.position.clone();
    //没有单独设置position的漫游点使用的position
    this.position.copy(curPanoTransform.pos || this.posCustom);

    this.quaCustom = info.qua ? info.qua.clone() : this.quaternion.clone();
    this.quaternion.copy(curPanoTransform.qua || this.quaCustom);

    this.widthCustom = info.width;
    this.heightCustom = info.height;
    this.width = curPanoTransform.width || this.widthCustom;
    this.height = curPanoTransform.height || this.heightCustom;
    var a = this.getScaleBySize(this.width, this.height);
    this.scale.setX(a.x);
    this.scale.setY(a.y);

    if (info.type) {
      if (!plane.material.map) {
        if (info.type == "video") {
          plane.material.map = new THREE.VideoTexture(info.media);
          this.hasRequestLoad = true;

          plane.material.map.wrapS = plane.material.map.wrapT =
            THREE.ClampToEdgeWrapping;
          plane.material.map.minFilter = THREE.LinearFilter;
          plane.material.map.magFilter = THREE.LinearFilter;
          plane.material.map.generateMipmaps = true;
        } else {
          this._loadDones = [];
          /* plane.material.map = Texture.load(info.file,()=>{
                        if(this._loadDones){
                            this._loadDones.forEach(e=>e())
                            this._loadDones = null
                        }
                    })  */
        }
        /* plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
                plane.material.map.minFilter = THREE.LinearFilter;
                plane.material.map.magFilter = THREE.LinearFilter;
                plane.material.map.generateMipmaps = true;  */
      } else plane.material.map.image = info.media;
      this.file = info.file;
    }
    this.overlayType = info.type;

    if (!!this.hasBox != !!info.hasBox) {
      this.addBox(!this.hasBox);
    }

    this.updateMatrixWorld();
    this.getVisiblePanos();
  };

  Overlay.prototype.getTransformSid = function() {
    var name;
    if (player.mode == "panorama") {
      name = player.currentPano ? player.currentPano.id : "outside";
    } else {
      name = "outside";
    }
    return name;
  };

  Overlay.prototype.addBox = function(state) {
    if (state == !!this.hasBox) {
      return;
    }
    if (state) {
      var box = new THREE.Mesh(_boxGeometry, _boxMat);
      box.position.set(0, 0, settings.overlay.depth / 2);
      box.renderOrder = 3;
      this.plane.position.set(0, 0, settings.overlay.depth);
      this.add(box);
      this.box = box;
    } else {
      this.plane.position.set(0, 0, 0);
      this.remove(this.box);
      this.box = null;
    }
    this.hasBox = state;
  };

  Overlay.prototype.getSizeByScale = function() {
    return {
      width: settings.overlay.width * this.scale.x,
      height: settings.overlay.height * this.scale.y,
    };
  };
  Overlay.prototype.getScaleBySize = function(width, height) {
    return {
      x: width / settings.overlay.width,
      y: height / settings.overlay.height,
    };
  };

  Overlay.prototype.preDeal = function(info) {
    info.pos = new THREE.Vector3().fromArray(info.pos);
    info.qua = new THREE.Quaternion().fromArray(info.qua);
    info.width = parseFloat(info.width);
    info.height = parseFloat(info.height);
    info.depth = parseFloat(info.depth);
    info.hasBox = parseInt(info.hasBox);
    info.pos.x = parseFloat(info.pos.x);
    info.pos.y = parseFloat(info.pos.y);
    info.pos.z = parseFloat(info.pos.z);
    info.qua.x = parseFloat(info.qua.x);
    info.qua.y = parseFloat(info.qua.y);
    info.qua.z = parseFloat(info.qua.z);
    info.qua.w = parseFloat(info.qua.w);

    if (!info.transformAtPanos) info.transformAtPanos = {};

    for (let i in info.transformAtPanos) {
      info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(
        info.transformAtPanos[i].pos
      );
      info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(
        info.transformAtPanos[i].qua
      );
    }
  };

  Overlay.prototype.getVisiblePanos = function() {
    this.visiblePanos = common.getVisiblePano(this.plane.getWorldPosition(), {
      model: null,
    });
  };

  Overlay.prototype.updateVisibles = function(panos) {
    if (settings.isEdit && EditOverlay.editPlane == this) {
      return true;
    }

    this.visible = !!panos.find((pano) => this.visiblePanos.includes(pano));
    if (!this.visible && this.overlayType == "video") this.videoControl("stop");
  };

  Overlay.updateVisibles = function(panos) {
    if (panos === true) {
      player.overlayGroup.children.forEach((e) => (e.visible = true));
    } else {
      player.overlayGroup.children.forEach((e) => e.updateVisibles(panos));
    }
  };

  Overlay.prototype.videoControl = function(state) {
    if (this.overlayType != "video") return;
    if (!state || state == "stop") {
      this.plane.material.map.image.paused ||
        this.plane.material.map.image.pause();
      if (state == "stop") {
        this.plane.material.map.image.currentTime = 0;
      }
      //console.log("pause")
    } else if (state) {
      this.plane.material.map.image.paused &&
        this.plane.material.map.image.play();
      //console.log("play")
    }
  };
  Overlay.prototype.inSight = function() {
    if (player.mode == "panorama") {
      var position = this.plane.getWorldPosition();
      var pos2d = math.getPos2d(position, player.camera, $("#player")[0]);
      if (pos2d.trueSide && pos2d.inSight) {
        return true;
      } else {
        var cornerPoint = [
          new THREE.Vector3(
            -settings.overlay.width / 2,
            settings.overlay.height / 2,
            0
          ),
          new THREE.Vector3(
            settings.overlay.width / 2,
            settings.overlay.height / 2,
            0
          ),
          new THREE.Vector3(
            settings.overlay.width / 2,
            -settings.overlay.height / 2,
            0
          ),
          new THREE.Vector3(
            -settings.overlay.width / 2,
            -settings.overlay.height / 2,
            0
          ),
        ];
        for (var i = 0; i < 4; i++) {
          cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
          var pos2d = math.getPos2d(
            cornerPoint[i],
            player.camera,
            $("#player")[0]
          );
          if (pos2d.trueSide && pos2d.inSight) {
            return true;
          }
        }
      }
    } else {
      return true;
    }
  };

  Overlay.prototype.addToLoadQueue = function() {
    if (this.overlayType == "photo") {
      Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this);
    }
  };

  Overlay.prototype.requestDownload = function() {
    if (this.hasRequestLoad || this.overlayType != "photo") return;

    console.log("overlay beginDownload : " + this.sid);
    var plane = this.plane;

    plane.material.map = Texture.load(this.file, () => {
      plane.material.needsUpdate = true;
      if (this._loadDones) {
        this._loadDones.forEach((e) => e());
        this._loadDones = null;
      }
      setTimeout(Overlay.loadNext, 50);
      plane.material.opacity = 1;
      console.log("overlay loaded: " + this.sid);
    });
    plane.material.map.wrapS = plane.material.map.wrapT =
      THREE.ClampToEdgeWrapping;
    plane.material.map.minFilter = THREE.LinearFilter;
    plane.material.map.magFilter = THREE.LinearFilter;
    plane.material.map.generateMipmaps = true;

    this.hasRequestLoad = true;
  };

  Overlay.loadQueue = []; //等待下载的overlay，目前只针对photo
  Overlay.maxLoadingCount = 3; //同时正在load图片的数量
  Overlay.loadNext = () => {
    //继续requestDownload  loadQueue中前排的item

    var loadings = player.overlayGroup.children.filter(
      (e) => e.hasRequestLoad && e._loadDones
    ); //开始下载了但是没加载好的

    Overlay.loadQueue
      .slice(0, Overlay.maxLoadingCount - loadings.length)
      .forEach((e) => e.requestDownload());
    Overlay.loadQueue.splice(0, Overlay.maxLoadingCount - loadings.length);
  };

  Overlay.getNeedLoad = function() {
    //计算获取loadQueue，每次都重新计算，覆盖旧的
    if (!player || !player.domElement || !player.mode) return;

    if (player.mode != "panorama") {
      if (!Overlay.loadWhenOutside) return;

      if (Overlay.loadQueue.length == 0) {
        Overlay.loadQueue = player.overlayGroup.children
          .filter((e) => !e.hasRequestLoad)
          .slice(0, 5);
      }

      return;
    }
    Overlay.loadWhenOutside = true;
    var overlays = player.overlayGroup.children.filter(
      (e) => !e.hasRequestLoad && e.visiblePanos.includes(player.currentPano)
    );
    //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2);
    var cameraDir = player.getDirection();

    /* var maxCount = 5; 
        if(overlays.length>maxCount){
            for(var i=0;i<overlays.length;i++){ 
                //角度为可见范围 
                var v1 = cameraDir.clone().setY(0);
                var v2 = overlays[i].plane.getWorldPosition().sub(player.position).setY(0)
                if(v1.angleTo(v2) <= maxAngle){
                    Overlay.loadQueue.push(overlays[i])
                    if(Overlay.loadQueue.length>=10) break;
                }  
            } 
            if(Overlay.loadQueue.length<Overlay.maxLoadingCount){
                Overlay.loadQueue.push()
            }
        }else{ */
    Overlay.loadQueue = overlays;
    //}

    var request = [
      (overlay) => {
        return true;
      },
    ];
    var rank = [
      (overlay) => {
        var dis = overlay.plane.getWorldPosition().distanceTo(player.position);
        return -dis;
      },
      (overlay) => {
        var tagDir = overlay.plane.getWorldPosition().sub(player.position);
        var angle = tagDir.angleTo(cameraDir);
        return -angle * 20;
      },
    ];
    var result = common.sortByScore(Overlay.loadQueue, request, rank);
    Overlay.loadQueue = result
      ? result.slice(0, 5).map((e) => e.item)
      : player.overlayGroup.children
          .filter((e) => !e.hasRequestLoad)
          .slice(0, 2);
  };

  Overlay.load = () => {
    //开始下载图片
    Overlay.getNeedLoad();
    Overlay.loadNext();
    var unloads = player.overlayGroup.children.filter((e) => !e.hasRequestLoad);
    if (unloads.length) {
      setTimeout(Overlay.load, 200);
    } else {
      Overlay.allRequestLoad = true;
      console.log("allRequestLoad");
    }
  };

  window.Overlay = Overlay;
};