macao_army/SuperTwo791/js/overlay1.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){
        if( info.media.includes('text') && !info.words)return;
        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"  
                
            }else if(info.media.includes('text')){
                info.type = "text";
                
                var fontSize = 40;
                var lineHeight = fontSize * 2.1;//fontSize + 行间距
                var texWidthRitio = 0.86  
                var canvas = document.createElement('canvas');  
                var context = canvas.getContext('2d');
                canvas.width = 1024; 
                context.font =  `${fontSize}px 微软雅黑`;     
                 
                var result = []

                info.words.forEach((words)=>{
                    if(!words){result.push("");return;}
                    result = result.concat ( breakLinesForCanvas(
                        words,
                        //'使用很寻常的二分查找，如果某一个位置之前的文字宽度小于等于设定的宽度，并且它之后一个字之前的文字宽度大于设定的宽度，那么这个位置就是文本的换行点。上面只是找到一个换行点，对于输入的一段文本，需要循环查找，直到不存在这样的换行点为止, 完整的代码如下',
                        context, canvas.width * texWidthRitio ) )
                })

                
               
                canvas.height = (result.length + 1 ) * lineHeight  
                var context = canvas.getContext('2d');//不知为什么要再获取一次context才行
                context.font =  `${fontSize}px 微软雅黑`;     
                /* context.fillStyle = '#fff';
                context.fillRect(0,0,canvas.width,canvas.height); */
                context.fillStyle = '#f5c772';
                result.forEach(function(line, index) {
                    context.fillText(line, canvas.width * (1-texWidthRitio)/ 2, lineHeight * (index + 1));
                });

                var url = canvas.toDataURL()    
                var img = new Image();
                img.src = url;
                info.media = img;
                info.lineCount = result.length
            }
            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.computeMapRepeat = function(info){//使得文字不变形
        clearInterval(this.mapInterval);
        var map = this.plane.material.map;
        var tw = map.image.width,  th = map.image.height,
            w = this.width, h = this.height;
            
        var ratio = (h / w) / (th / tw); //显示的部分占据整个图高度的比例 
        map.repeat.y = ratio    
        if(th / tw > h / w){ 
            //如果贴图设置成不repeat(缺点是会有一段白屏期)
            /* map.offset.y = 1 - ratio;//向下移动 1-ratio个高度， 使图片的顶部显示在plane的最上方；之后滚动时正常repeat在 1-ratio到0之间变化 ， 为了连续变化，改成 1 到 -ratio
            this.mapInterval = setInterval(()=>{
                map.offset.y -= 0.003;
                if(map.offset.y < -ratio )map.offset.y = 1
            },20) */
               
            //如果贴图设置成 repeat(缺点是 可能衔接时的缝隙比较窄)
            map.wrapS = map.wrapT = THREE.RepeatWrapping; 
            map.offset.y = 1 - ratio;//向下移动 1-ratio个高度， 使图片的顶部显示在plane的最上方；之后滚动时正常repeat在 1-ratio到0之间变化 ， 为了连续变化，改成 1 到 -ratio
            this.mapInterval = setInterval(()=>{
                map.offset.y -= 0.013 / info.lineCount ;
                //if(map.offset.y < -ratio )map.offset.y = 1
            },20)  
            
        }else{//如果图可以完全展示
            map.offset.y = (1 - ratio) / 2;//居中
            map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
            
        }
        map.needsUpdate = true;
    }
      
    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 if(info.type == "photo"){   
                    plane.material.map = Texture.load(info.file,()=>{
                        if(this._loadDone)this._loadDone()
                    }) 
                }else{
                    plane.material.map = new THREE.Texture;
                    plane.material.map.image = info.media;
                    info.media.onload = ()=>{
                        plane.material.map.needsUpdate = true
                        this.computeMapRepeat(info)
                    }
                }                    
                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)

        if(info.media.includes("text")){ 
            /* 
                只有http能加载
             */
            $.ajax({ 
                url: "/api/web/list",
                type: 'POST',
                dataType: "json", 
                cache: false, 
                contentType: 'application/json;charset=UTF-8',
                data : JSON.stringify({"pageNum":1,"pageSize":1000} ),
                
                success: (data)=>{ 
                    console.log(data)
                    var words = [];
                    data.data.list.forEach((item,index)=>{
                        /* words += item.nickName; words += "  "
                        words += item.createTime; words += "\n\n"  
                        words += item.msg; words += "\n"
                        words += "————————\n\n"  */

                        words.push(item.nickName + " " + item.createTime);
                        //words.push("");
                        words.push(item.msg);
                        words.push("————————————————");
                        words.push("");
          
                    })
                    console.log(words)
                    info.words = words 
                    this.build(info)
                },
                error: function (msg) {
                    console.log(msg)
                }
            });
              

        }
    }
   





    function findBreakPoint(text, width, context) {
        var min = 0;
        var max = text.length - 1;

        while (min <= max) {
            var middle = Math.floor((min + max) / 2);
            var middleWidth = context.measureText(text.substr(0, middle)).width;
            var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1)).width;
            if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
                return middle;
            }
            if (middleWidth < width) {
                min = middle + 1;
            } else {
                max = middle - 1;
            }
        }

        return -1;
    }

    function breakLinesForCanvas(text, context, width, font) {  
        var result = [];
        var breakPoint = 0;

        if (font) {
            context.font = font;
        }

        while ((breakPoint = findBreakPoint(text, width, context)) !== -1) {
            result.push(text.substr(0, breakPoint));
            text = text.substr(breakPoint);
        }

        if (text) {
            result.push(text);
        }

        return result;
    }




   
    
    window.Overlay = Overlay;
}