scene_wisdom/js/overlay.js

 
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.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 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
            }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 = 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) 
        
        
    }

     
      
    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 );  
                }else{  
                    plane.material.map = Texture.load(info.file,()=>{
                        if(this._loadDone)this._loadDone()
                    }) 
                } 
                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); 
        }
        
        
        
    } 

    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)
                
        }
        
    }
    
    
    window.Overlay = Overlay;
}