zhengzhou_university/web/public/static/js/overlay.js

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

var filterAll = function filterAll(e, t) {
    return e.filter(function (e) {
  return t.every(function (t) {
    return t(e);
  });
});
} 
var sortByScore = function (list, request, rank) {
  var i = filterAll(list, request);
  return 0 === i.length ? null : i = i.map(function (e) {
    return {
      item: e,
      score: rank.reduce(function (t, i) {
        return t + i(e);
      }, 0)
    };
  }).sort(function (e, t) {
    return t.score - e.score;
  });
};
/* var cameraLight = {
    clampVFOV: function(fov, t, i, n) {
        var r = cameraLight.getHFOVFromVFOV(fov, i, n);
        return r > t ? cameraLight.getVFOVFromHFOV(t, i, n) : fov
    },
    getHFOVForCamera: function(e, t, i) {
        return cameraLight.getHFOVFromVFOV(e.fov, t, i)
    },
    getHFOVFromVFOV: function(fov, t, i) {
        var n = t
            , o = i
            , a = 2 * Math.atan(Math.tan(fov * MathLight.RADIANS_PER_DEGREE / 2) * (n / o)) * MathLight.DEGREES_PER_RADIAN;
        return a
    },
    getVFOVFromHFOV: function(e, t, i) {
        var n = t
            , o = i
            , a = 2 * Math.atan(Math.tan(e * MathLight.RADIANS_PER_DEGREE / 2) * (o / n)) * MathLight.DEGREES_PER_RADIAN;
        return a
    }
};
  */
 
 
 
var 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.sid == '1624590736940'||info.sid == '1624778346600'){
            this.playPanos = [player.model.panos.index["db8c40d5b3be459695c25d0de45f7b69"]]
            info.loop = false;
            this.hideWhenPlayDone = true
        }
        
        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 video = $('<video controls="controls" loop 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!!!")
                })
                
                this.hideWhenPlayDone && video.addEventListener('ended', ()=>{
                    this.visible = false
                })
                
                
                
                video.volume = 0
                video.muted = true
                if(info.loop == false){
                    this.loop = video.loop = false
                    this.playCount = 0
                }
                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] || {} 
        
        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.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.inSight = function(){
        //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2);
       
        var position = this.plane.getWorldPosition()
        var pos2d = math.getPos2d(position, player.camera, $("#player")[0])
        if(pos2d.trueSide && pos2d.inSight){
            
            /* 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),
            ]; */  
            var cornerPoint = [//正对的时候才触发播放,只需要管宽度即可
                new THREE.Vector3(-settings.overlay.width/2, 0, 0),
                new THREE.Vector3(settings.overlay.width/2, 0, 0),
            ];             
            for(var i=0;i<cornerPoint.length;i++){
                cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
                var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
                if(!pos2d.trueSide || !pos2d.inSight){
                    return false
                }
            }
            return true
        }
        
        
    }
    
    
    
    
    
    
    
    Overlay.prototype.getVisiblePanos = function(){ 
        if(!this.visiblePanos){
            this.visiblePanos = getVisiblePano(this.plane.getWorldPosition(),{model: null}); 
        }
         
        
    }
    Overlay.prototype.updateVisibles = function(panos){ 
        this.visible = !!panos.find(pano=>this.visiblePanos.includes(pano))
        //if(this.loop) 
        if((!this.visible || (this.playPanos && !this.playPanos.find(pano=>player.currentPano == pano)  )) && 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.pause()
            if(state == 'stop'){
                this.plane.material.map.image.currentTime = 0;
                this.playCount = 0
            }
            //console.log("pause")
        }else if(state && (this.loop !== false || this.playCount == 0 || this.plane.material.map.image.currentTime<this.plane.material.map.image.duration)
          && (!this.playPanos || this.playPanos.find(pano=>player.currentPano == pano)  )){ 
            this.plane.material.map.image.play()
            this.playCount = this.playCount ? (this.playCount+1) : 1
            //console.log("play")
        }
        
    }
        
    
    
    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 requestDownload : '+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.getNeedLoad = function(){ 
        if(!player || !player.domElement || !player.mode)return;
        
        if(player.mode != 'panorama'){
            if( !Overlay.loadWhenOutside) return;
            /* var loadings = player.overlayGroup.children.filter(e=>e.hasRequestLoad && e._loadDones)//开始下载了但是没加载好的
            
            if(loadings.length==4){
                Overlay.loadQueue = player.overlayGroup.children.filter(e=>!e.hasRequestLoad) .slice(0,5);
            } */
            
            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 = 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.maxLoadingCount = 3;
    Overlay.loadNext = ()=>{
        
        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.load = ()=>{
        Overlay.getNeedLoad()
        //Overlay.loadQueue.slice(0,2).forEach(e=>e.requestDownload())
        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;
    
}