macao_army/SuperTwo791/js/overlay.js

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

 
 

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 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.oncanplaythrough = function() {
                    plane.material.map.needsUpdate = !0
                    if(video.shouldPlay){
                        video.play()
                    } 
                }
                
                
                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 = JSON.parse("[\"测试留言 2021-10-14 20:44:23\",\"“五角星”、“MACAU”、“莲花”、“CPLA”，由81人组成的枪械团体操将花式操枪动作与队形变换结合，不时变换出的图案代表了驻军官兵爱国爱澳的赤诚之心和捍卫国家主权、维护澳门繁荣稳定的坚强决心。💥💥💥💥💥💥💥💥💥💥💥\",\"————————————————\",\"\",\"移动端测试留言功能 2021-10-14 20:42:16\",\"“五角星”、“MACAU”、“莲花”、“CPLA”，由81人组成的枪械团体操将花式操枪动作与队形变换结合，不时变换出的图案代表了驻军官兵爱国爱澳的赤诚之心和捍卫国家主权、维护澳门繁荣稳定的坚强决心。💪💪💪💪💪💪💪💪💪💪💪💪\",\"————————————————\",\"\",\"123 2021-10-14 20:24:39\",\"测试留言\",\"————————————————\",\"\"]"   
                ) 
                
                
                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)
        this.fileSrc = info.file

    }
    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; 
        var transformAtPanos = {}
        for(var i in info.transformAtPanos){
            transformAtPanos[i] = {
                width : info.transformAtPanos[i].width,
                height : info.transformAtPanos[i].height,
                pos : info.transformAtPanos[i].pos.clone(),
                qua : info.transformAtPanos[i].qua.clone(),
            }      
        } 
        
        this.transformAtPanos = transformAtPanos
        //在每个漫游点独立设置的position。  
        //var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
        var curPanoTransform = this.transformAtPanos[ 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
 
                } else if(info.type == "photo"){
                    this._loadDones = []
                    
                }else{
                    plane.material.map = new THREE.Texture;
                    plane.material.map.image = info.media;
                    info.media.onload = ()=>{
                        plane.material.map.needsUpdate = true
                        this.computeMapRepeat(info)
                    }
                  
                }
                
            }else{
                plane.material.map.image = info.media;
            }
                
            if(plane.material.map){
                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.file = info.file;
        }
        this.overlayType = info.type;

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

        this.updateMatrixWorld()
        this.getVisiblePanos()

        {//gif
            if(this.animation){
                GifTexDeal.remove(this.animation)
            }
            this.animateInfo = CloneObject(info.animateInfo) 
            if(this.animateInfo && plane.material.map){
                this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
                this.visible && this.inSight() && GifTexDeal.start(this.animation)
            }    
        }
        
        
    }



   




    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)

        }


        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)
                }
            });
              

        }

    }

    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 && e.updateVisibles(panos))
        }
    }

    Overlay.prototype.videoControl = function(state){
        if(this.overlayType != "video")return
        var video = this.plane.material.map.image
        if(!state || state == 'stop'){
            video.paused || video.pause()
            if(state == 'stop'){
                video.currentTime = 0;
               
            }
            video.shouldPlay = false
            //console.log("pause")
        }else if(state){ 
            video.paused && video.play()
            video.shouldPlay = true
            //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, ()=>{
            
            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)
            
            if(this.animateInfo){
                this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
                this.visible && this.inSight() && GifTexDeal.start(this.animation)
            }
            
            plane.material.needsUpdate = 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;

        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')
        }
    }


    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;

}