1

web/public/static/js/overlay.js

@@ -1,7 +1,4 @@
  
- 
- 
- 
 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 )
@@ -24,14 +21,14 @@ var initOverlay = function(THREE){
     var Overlay = function(info){ 
         THREE.Object3D.call(this); 
         this.sid = info.sid;
-        if(info.media)this.preDeal(info)  
+        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,
@@ -48,10 +45,6 @@ var initOverlay = function(THREE){
         }   
         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]
@@ -72,47 +65,10 @@ var initOverlay = function(THREE){
                  
                 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 ) )
-                })
-
+                info.type = "photo"  
                 
-               
-                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 = '#000';
-                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) 
@@ -120,65 +76,50 @@ var initOverlay = function(THREE){
         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;
-        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) 
+        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)
-        info.pos && this.position.copy(info.pos);
-        info.qua && this.quaternion.copy(info.qua);
+        
+         
+        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 if(info.type == "photo"){   
+                }else{  
                     plane.material.map = Texture.load(info.file,()=>{
-                        if(this._loadDone)this._loadDone()
+                        if(this._loadDones){
+                            this._loadDones.forEach(e=>e())
+                            this._loadDones = null
+                        }
                     }) 
-                }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;
@@ -191,6 +132,9 @@ var initOverlay = function(THREE){
         if(!!this.hasBox != !!info.hasBox){
             this.addBox(!this.hasBox); 
         }
+        
+        
+        
     } 
 
     Overlay.prototype.addBox = function(state){
@@ -213,9 +157,18 @@ var initOverlay = function(THREE){
         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)
@@ -231,103 +184,17 @@ var initOverlay = function(THREE){
         info.qua.y = parseFloat(info.qua.y)
         info.qua.z = parseFloat(info.qua.z)
         info.qua.w = parseFloat(info.qua.w)
-
-        if(info.sid == "1609818530106"){
-            info.media = ['text'];
-            /* 
-                只有http能加载
-             */
-            $.ajax({ 
-                url: "http://192.168.0.44:8110/api/web/list",
-                type: 'POST',
-                dataType: "json", 
-                headers: {
-                    //'Content-Type': 'application/json',
-                    token: "eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsInJvbGUiOm51bGwsIm1hbmFnZXIiOm51bGwsImlkIjoxLCJ1c2VyTmFtZSI6ImFkbWluIiwiZXhwIjoxNjExODE1NDQ5LCJpYXQiOjE2MTE3MjkwNDksImp0aSI6IjMxYjllN2IxLTUxYTYtNDgzZS04OGFhLTQwMzA4Y2M3YmU5ZiJ9.aSmiucG9u6ny7BdMOuHUBYO8K1_7ElLKwPCzmoVRKtI"
-                },
-                cache: false, 
-                contentType: 'application/json;charset=UTF-8',
-                data : JSON.stringify({"pageNum":1,"pageSize":1000,"rnd":0.1276922704592891} ),
+        
+        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)
                 
-                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;
 }