cd_mingrenguan/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 = 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 = "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;
        info.width && (this.scale.setX(info.width/settings.overlay.width),this.width = info.width)
        info.height && (this.scale.setY(info.height/settings.overlay.height),this.height = info.height) 
        info.depth && this.scale.setZ(info.depth/settings.overlay.depth)
        info.pos && this.position.copy(info.pos);
        info.qua && this.quaternion.copy(info.qua);
        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.media) 
                } 
                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.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) 
    }
    
    
    window.Overlay = Overlay;
}