Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/macao_army

SuperTwo762/css/main.css

@@ -2534,7 +2534,8 @@ body, html {
     white-space: nowrap;
     border-radius: 2px;
     cursor: default;
-    user-select: none
+    pointer-events:none;
+    user-select: none;
 }
 
 .gui-floorplan-label-text {

SuperTwo762/js/main_2020_show.js

@@ -32,6 +32,60 @@ g_tourAudio.oncanplaythrough = function() {
 }
 
 
+
+
+var musicList = {
+    "0102cp":'3458d3c7ca764ecaa13c88aaa8e0a1a8, 1107bf848a6146059249cc109c6d1472, 8c0e5bcc4a69470aa5f189edde162973, 2d00ef76d93f4a578b356c593da889b0, 61afb8aaf45046be865b1b30d0357754, 0a73cf23993d4f4cbb48337708f8c7b7, 9a32f7d9b29f427182b453b1a8009efc, 58ea5816c49b4c759c26b262f403eab1, 6c455875e3834d53b43a2beaba11aa4d'.split(','),
+    "04CP":'48930ada7d02438a846f6f6cf5a8693f, d3e00453736549e392ca91e9bd31ee72, b99ae9d8d19144f7866d49ed863a4b84, 14f349b0dd3d4646b2bd98c2ebfeb643'.split(','),
+    "03cp":'d9b104d7df9244fca5ad5af4d5fca8f7, 2860b361da9246949ab6f57cbb8ce82d, 491d8cce5dfa441db5a52eb248bf4a63'.split(','),
+    "19CP":'73a354895dc74c30beeb02a8d8bfe328, 256aedca55d6417fb696156279424d42, 10210bebd78b4d33ad05e0bef22cf0a3'.split(','),
+    "2021cp":'10793e907fa7493c83f73fdcfd7df706, 2e2da10199634b5188c5469c0f52f9f6, 449196f2aa014f9db6a6cda675df7b70'.split(','),
+    "22cp":'cf2d9fa92e8443aabbcc1a01736a052e, 08967bbdacec4ecf8ff44b219408ac9a, 8d20c6dd62c04564a172430705ba0295, a8a7d94bb9b84e8cb45556bbd548961d'.split(','),
+    "23cp":'90197f7926e2466498135ef053147aaa, 6138d5511fe546e396a51408dfc9f6c5'.split(','),
+
+    "0506CP":'6cee9744a41942f384ca0a9130f65ae8, a1f9e4436ea24f99a360ac327979e555, 8d216c8512264564bcde41c544fdfc69, f8769828fe9f4dda8449cd5d9506eeb4, 12142ab7fbb74122ba0df52eaa5a5363, fb3b381371d04864ab99dfd30a08fe89, 0921140bde3f428180b2d6b603775f51'.split(','),
+    "07cp":'8902a763387040b2ad15a6325508cfca, 5adf5343a38340de998a0210cc97c00f'.split(','),
+    "08CP":'f9e6d48c697f455f9b294523a5222624, 4f912bc6dc2848ce924064d025635b81, 518612bb1c884d9bb7aff8d431904f8d'.split(','),
+    "09cp":'cb5887f7f3da43bf9ce383fbe4bae99b, d236fb56ac954bb29b3a6d0bdbe85588'.split(','),
+    "10cp":'dca81dee239e4f7e9d8b69c3af629f00, 69ef058f04474e3fbfd4cd22bb440934, 42fe939bbf7c42058f9c32356a08f319'.split(','),
+    "11cp":'fd62c35e2572460b88fb934e56888a2d, 4836763c382a45dcba1210f616e9e3be'.split(','),
+    "1213CP":'06fcab3ccc204198ba04bc226d6a049a, c72fe82506234db6bd75919ac0e61ec5, 884d594255f54a88b36f078ec2842669, 921eaf2a769c4f069e9588b0fa99f170, 02abef88316e482b9d4c4f3cb2a34c64'.split(','),
+    "15cp":'6e4c35329ba1470c8ebdf2ad3f1e92cd'.split(','),
+    "14cp":'0b168caa5f1848e1b614e97b3cc22923, a05cc1124331484c9d852f4918a3248d'.split(','),
+    "16cp":'506d2f805551425d938f488746730060, 21fbd2534bc840ebac3a5fac50e54cf5'.split(','),
+    "17cp":'d756e9288311440599eab62bde2e017e'.split(','),
+    "18cp":'11bb3c4c831a4151b8c7086f39086878'.split(','),
+     
+    
+    
+    
+}
+
+var playMusic = function(pano){
+    var shouldplayMusic
+    for(let i in musicList){
+        if(musicList[i].find(e=>e.includes(pano.id))){
+            shouldplayMusic = i;
+            break
+        }
+    }
+    if(shouldplayMusic){
+        if(!g_bgAudio.src.includes(shouldplayMusic)){
+            g_bgAudio.src = "music/"+shouldplayMusic+'.mp3'
+            manage.switchBgmState(true)
+        }
+    }else{
+        g_bgAudio.src = ''
+        
+    }
+    
+    
+}
+
+
+
+
+
 var dealMap = (map)=>{//使不resize  when   image is not power of two
     map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
     map.minFilter = THREE.LinearFilter;
@@ -238,16 +292,7 @@ var videoPosInfo = {
 
         "9a32f7d9b29f427182b453b1a8009efc":[0.03080183370988987, -0.26776671083073333, 0.2265850992680396],
     "988a92b36f544326896b101b54a69290":[-0.034905996796551514, -0.26776671083073333, 0.3680810776239348],
-
-                                 
-            
-                                  
-                                                                     
-          
-                        
-     
-               
-  
+ 
     
     "a812006399af4c73b6b19941485597a2":[-0.06490599679655151, -0.26776671083073333, 0.3380810776239347],
     "9438aaa08cc94456a432ee3a7fa3378f":[-0.06490599679655151, -0.26776671083073333, 0.3380810776239347],
@@ -318,46 +363,9 @@ var loadVideo = ()=>{
     var btn = addSoundBtn(video)
     window.videoPlane.add(btn)
     video.btn = btn;  btn.video = video
-                                 
-                              
-                               
-               
-                                                                                      
-                                         
-                                                           
-                                 
-                              
-                               
                
-                               
-                                      
-    
     btn.position.set(-11.6,1.02,-8.5);
-    btn.rotation.y = -0.4
-    
-         
-    
-                       
-    
-                                      
-    
-                                           
-                                                                                            
-                                                               
-                                      
-    
-    
-                                            
-                                                          
-    
-                                             
-                            
-                                                              
-                                                             
-                                                                                                  
-                                                                                                
-                                      
-    
+    btn.rotation.y = -0.4 
     
 }
                                                   
@@ -16175,7 +16183,7 @@ window.Modernizr = function(n, e, t) {
             }else{
                 u.texture1.value = defaultTex1;
                 u.texture2.value = defaultTex2;
-                console.log(this.sid)
+               
             }  
         }
         
@@ -18160,8 +18168,12 @@ window.Modernizr = function(n, e, t) {
             n.parseRoomIndexFromWorkshopRoomId = function(e) {
                 var t = -1;
                 if (e) {
-                    var i = e.split("_");
-                    t = parseInt(i[0])
+                    if(typeof e == 'number'){
+                        t = parseInt(e)
+                    }else{
+                        var i =  e.split("_");
+                        t = parseInt(i[0])
+                    }
                 }
                 return t
             }
@@ -18927,15 +18939,13 @@ window.Modernizr = function(n, e, t) {
                 this.labels = new x(this);
                 var e = $.Deferred();
                 //加载俯视图的标签  注释这个备注就会加载
-                /* window.MP_PREFETCHED_MODELDATA.model.player_options.labels ? this.showingLabels = true : '';
-                if (!this.showingLabels) */
-                    return e.resolve();
-                    
-                    
-                    
-               // var t = this.options.urlBase + "/api/v1/jsonstore/model/labels/" + this.sid;
+                //原先是labels, 改为showLabels，因为之前的somedata写的labels都是true
+                //window.MP_PREFETCHED_MODELDATA.showingLabels ? this.showingLabels = true : '';
+                /* if (!this.showingLabels)  
+                    return e.resolve();  */
+                // var t = this.options.urlBase + "/api/v1/jsonstore/model/labels/" + this.sid;
                 var t = g_Prefix + "data/" + this.sid + "/labels.json";
-                console.log(t);
+                 
                 return this.labels.load(t, !this.isPublic).done(e.resolve.bind(e)).fail(function() {
                     O.warn("Getting labels failed, not displaying labels."),
                     e.resolve()
@@ -19759,6 +19769,9 @@ window.Modernizr = function(n, e, t) {
                         newPano: this
                     }),
                     e = this
+                    
+                    
+                    playMusic(this)
                 }
             }(),
             n.prototype.exit = function() {
@@ -23052,13 +23065,7 @@ window.Modernizr = function(n, e, t) {
                             this.model.hots[i].update(this.camera)
                         } 
                         if(this.mode == 'panorama')this.overlayGroup.children.forEach(overlay=>{
-                            if(overlay.overlayType == "video"){
-                                if(overlay.visible && overlay.inSight()){
-                                    overlay.videoControl(true) 
-                                }else{
-                                    overlay.videoControl(false) 
-                                }
-                            }
+                            overlay.update()
                         })
                         
                     }
@@ -23395,7 +23402,17 @@ window.Modernizr = function(n, e, t) {
             
             n.prototype.clickOverlay = function(overlay){
                 if(this.openOverlay && !overlay)return;
+                
+                if(overlay == window.videoPlane){
+                    if(overlay.material.map.image.paused) playVideo(true)
+                    else playVideo(false)
+                    return  
+                }
+                
+                
+                
                 var plane = overlay.plane;
+                 
                 
                 if(overlay.overlayType == "video"){
                     if(plane.material.map.image.paused) plane.material.map.image.play()
@@ -23735,7 +23752,7 @@ window.Modernizr = function(n, e, t) {
                             .bind(this), a, C, 0, A[f.transition.movementEasing], null, V.LookTransition)
                         }
                     }
-                    if (i === this.currentPano )
+                    if (i === this.currentPano  || this.flying)
                         return void C();
                     this.flying = !0;
                     var L = this.position.clone()
@@ -23770,7 +23787,18 @@ window.Modernizr = function(n, e, t) {
                     }
                     .bind(this), I, null, 0, A[f.transition.movementEasing], null, V.LookTransition);
                     var B = c ? null : A[f.transition.movementEasing];
-                    this.nextPano = i,
+                    this.nextPano = i 
+                    
+                    
+                    //===========================
+                    updateVideo({type:"beforeFlytopano", pano:i, dur:I})//add        
+                    
+                    //===========================
+                    
+                    
+                    
+                    
+                    
                     y.start(v.uniform(this.model.skybox, "progress", 1), I, null, 0, A[f.transition.blendEasing], "skyFly", V.FlyToPano),
                     y.start(v.allUniforms(this.model.chunks, "progress", 1), I, null, 0, A[f.transition.blendEasing], "chunkFly", V.FlyToPano),
                     y.start(v.vector(this.cameraControls.cameras[u.PANORAMA].position, i.position), I, function(e) {
@@ -31451,22 +31479,29 @@ window.Modernizr = function(n, e, t) {
             }
             ,
             
-            getVisiblePano : function(position, options={}){//add
+            getVisiblePano : function(positions = [], options={}){//add
                 var visiblePanos = []; 
-                var B = position.clone(); 
+               
                 var panos = options.panos ||  player.model.panos.list;
-                 
+                options.posAtPanos = options.posAtPanos  || {}//在不同漫游点的positions
                 panos.forEach((pano)=>{
                     if(!pano.isAligned())return;
                     var A = pano.position.clone();
-                      
-                    var ray = new THREE.Raycaster(A.clone(), B.clone().sub(A).normalize(), 0, A.distanceTo(B) - (options.tolerance||0) ) 
-                    var o = ray.intersectObjects(options.model || player.model.colliders, true);
-                     
-                     
-                    if (!o || !o.length)visiblePanos.push(pano );
-                     
+                    var posB = options.posAtPanos[pano.id] || positions;
+                    var posLength = posB.length
                     
+                    for(let i=0;i<posLength;i++){
+                        
+                        var B = posB[i];
+                        var ray = new THREE.Raycaster(A.clone(), B.clone().sub(A).normalize(), 0, A.distanceTo(B) - (options.tolerance||0) ) 
+                        var o = ray.intersectObjects(options.model || player.model.colliders, true);
+                    
+                        if (!o || !o.length){ //只要有一点可见，就算整体可见
+                            visiblePanos.push(pano );
+                            break;
+                        }
+                    }    
+                     
                 })  	  
              
                 return visiblePanos

SuperTwo762/js/manage.js

@@ -158,7 +158,7 @@ Manage.prototype.switchBgmState = function(state,fun){
     if(!g_bgAudio || !g_bgAudio.src) return;
     
     var played = function(){
-        console.log('begin play bgm');
+        console.log('begin play bgm '+ g_bgAudio.src);
         g_play = 1; 
         g_playAudio = g_bgAudio;
         $("#volume a img").attr("src", "./images/Volume btn_off.png")
@@ -415,6 +415,120 @@ function hotMatcher(data){
 
 
 
+var GifTexDeal = {
+    
+    animateObjects : [], 
+     
+    addAnimation : function(texture, owner, info, id){
+        var object = {
+            texture,
+            owner,
+            info,
+            id 
+        }
+        this.setRepeart(object)
+        this.animateObjects.push(object)
+        return object
+    },
+    remove : function(object){
+        var index = this.animateObjects.indexOf(object) 
+        if(index>-1){
+            this.stop(object)
+            object.texture.repeat.set(1,1) 
+            this.animateObjects.splice(index, 1)
+        }
+    },
+    setRepeart : function(object){
+        object.texture.repeat.set(1/object.info.cellXcount, 1/object.info.cellYcount)
+    },
+    start: function(object){ 
+        /* var b = this
+          , offset = this.cursor.material.map.offset
+          , f = function(a) {
+            return Math.floor(17 * a) / 17   //对应17个精灵图片段
+        };
+        b.canStartAnimation = !1,
+        this.cursorAnimate = new TWEEN.Tween(offset).to({
+            x: 1    //100%
+        }, 1e3).onStart(function() {
+            b.canStartAnimation = !1
+        }).onStop(function() {
+            b.canStartAnimation = !0,
+            this.x = 0,
+            offset.x = 0
+        }).onUpdate(function() {}).onComplete(function() {
+            done(),
+            offset.x = 0,
+            setTimeout(function() {
+                b.canStartAnimation = !0
+            }, 1500)
+        }),
+        this.cursorAnimate.easing(f),
+        this.cursorAnimate.start()
+ */ 
+          
+        if(!object || object.started)return;
+        var count = object.info.cellXcount * object.info.cellYcount
+        
+        if(count == 1 )return;
+        
+        transitions.start( (progress)=>{
+            var index = Math.floor(count * progress);
+            var indexX =  index % object.info.cellXcount
+            var indexY =  object.info.cellYcount - Math.floor(index / object.info.cellXcount ) - 1;  //uv.offset.y是从下到上的
+            object.texture.offset.x = indexX / object.info.cellXcount;
+            object.texture.offset.y = indexY / object.info.cellYcount;
+            
+            //console.log(object.id + " : "+ object.texture.offset.toArray())
+        } , object.info.duration, ()=>{//done
+            object.started = false
+            object.texture.offset.x = 0;
+            object.texture.offset.y = 0;
+            this.start(object)
+        }, 0 ,null, object.id, "gif_"+object.id); 
+
+        object.started = true
+
+    },
+    
+    startAnimations : function(o={}){
+        this.animateObjects.forEach(e=>{this.start(e)})
+
+    }
+    ,
+    stop: function(object){ 
+        if(!object || !object.started)return;
+        transitions.cancelById("gif_"+object.id);
+        object.texture.offset.set(0,0)    
+        object.started = false
+    }
+}
+
+var CloneObject = function(copyObj, result, isSimpleCopy) {
+    //isSimpleCopy只复制最外层
+    //复制json		result的可能：普通数字或字符串、普通数组、复杂对象
+    if(!copyObj)return null
+    result = result || {};
+    if (copyObj instanceof Array) {
+        if (copyObj[0]instanceof Object) {
+            //不支持含有 [[Object]] 这样二级数组里面还是复杂数据的，普通和复杂的数据混合可能也不支持
+            console.error("不支持含有 [[Object]] 这样二级数组里面还是复杂数据的...")
+        }
+        return copyObj.slice(0);
+        //如果是数组，直接复制返回（排除数组内是object
+    }
+    for (var key in copyObj) {
+        if (copyObj[key]instanceof Object && !isSimpleCopy)
+            result[key] = CloneObject(copyObj[key]);
+        else
+            result[key] = copyObj[key];
+        //如果是函数类同基本数据，即复制引用
+    }
+    return result;
+}
+;
+
+
 
 //兼容一代的場景
 //請求地址統一管理

SuperTwo762/js/overlay.js

@@ -79,9 +79,10 @@ var initOverlay = function(THREE) {
                 
                 video.oncanplaythrough = function() {
                     plane.material.map.needsUpdate = !0
-                    if(video.shouldPlay){
-                        video.play()
-                    } 
+                   
+                    video.play()
+                        
+                     
                 }
                 
                 
@@ -97,8 +98,18 @@ var initOverlay = function(THREE) {
 
                 info.type = "photo"
                 plane.material.opacity = 0.1;
-            }
+                
+                /* this.animateInfo = {
+                        cellXcount : 4,
+                        cellYcount : 2,
+                        loop : true,
+                        duration : 1000 
+                    }
+                */
 
+        
+            }
+            
             plane.material.color = new THREE.Color(1,1,1)
         }
         if (info.width == void 0)
@@ -110,6 +121,10 @@ var initOverlay = function(THREE) {
 
     }
 
+
+
+
+
     Overlay.prototype.setFromInfo = function(info) {
         //1 恢复到编辑之前 2 初始加载 
         var plane = this.plane; 
@@ -170,8 +185,11 @@ var initOverlay = function(THREE) {
                 plane.material.map.minFilter = THREE.LinearFilter;
                 plane.material.map.magFilter = THREE.LinearFilter;
                 plane.material.map.generateMipmaps = true;  */
-            } else
+            } else{
                 plane.material.map.image = info.media;
+                plane.material.map.needsUpdate = true
+            }
+                
             this.file = info.file;
         }
         this.overlayType = info.type;
@@ -182,7 +200,21 @@ var initOverlay = function(THREE) {
 
         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)
+            }    
+        }
+        
+        
+        
     }
 
 
@@ -251,34 +283,86 @@ var initOverlay = function(THREE) {
 
     }
 
-    Overlay.prototype.getVisiblePanos = function() {
-        this.visiblePanos = common.getVisiblePano(this.plane.getWorldPosition(), {
-            model: null
+    Overlay.prototype.getVisiblePanos = function() {//在不同点还不一样
+        var depth = this.scale.z * settings.overlay.depth;
+        var getPos = function(position, quaternion, width, height){//每个overlay位置对应5个坐标，plane中心和四个角的位置
+            
+            var cornerPoint = [
+                new THREE.Vector3(0, 0, depth),
+                new THREE.Vector3(-width/2, height/2, depth),
+                new THREE.Vector3(width/2, height/2, depth),
+                new THREE.Vector3(width/2, -height/2, depth),
+                new THREE.Vector3(-width/2, -height/2, depth),
+            ]; 
+            
+            return cornerPoint.map(e=>{
+                return e.clone().applyQuaternion(quaternion).add(position)
+            }) 
+            
+        }
+        
+        var customPositions = getPos(this.posCustom, this.quaCustom, this.widthCustom, this.heightCustom)
+        var posAtPanos = {}
+        
+        for(let panoId in this.transformAtPanos){
+            if(panoId == 'outSide')continue;
+            posAtPanos[panoId] = getPos(this.transformAtPanos[panoId].pos, this.transformAtPanos[panoId].qua, this.transformAtPanos[panoId].width, this.transformAtPanos[panoId].height)
+            
+        }  
+        
+        
+        this.visiblePanos = common.getVisiblePano(customPositions, {
+            model: null , posAtPanos
         });
-
     }
     
     
-    Overlay.prototype.updateVisibles = function(panos) {
+    
+    Overlay.prototype.updateVisible = function(panos, visibility) {
         
         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')
+        this.visible = visibility != void 0 ? visibility : !!panos.find(pano=>this.visiblePanos.includes(pano))
+        
+        if (this.overlayType == 'video'){
+            //this.switchPlay(this.visible,  this.visible ? null : 'stop' );//可见时不操作；不可见时停止
+            this.update()
+        }
+        
+        
+            
+        
+        /* if(this.animateInfo){ //在player.update里更新
+            if(this.visible){
+                GifTexDeal.start(this.animation)
+            }else{
+                GifTexDeal.stop(this.animation)
+            }
+        } */ 
     }
     
     
     Overlay.updateVisibles = function(panos) {
         if (panos === true) {
-            player.overlayGroup.children.forEach(e=>e.visible = true)
+            player.overlayGroup.children.forEach(e=>e.updateVisible(null,true))
         } else {
-            player.overlayGroup.children.forEach(e=>e.updateVisibles(panos))
+            player.overlayGroup.children.forEach(e=>e.updateVisible(panos))
         }
     }
 
+
+    Overlay.prototype.switchPlay = function(state){//手动播放暂停 
+        this.pausedByUser = !state
+        
+        this.videoControl(state)
+       
+        
+    }
+    
+
+
     Overlay.prototype.videoControl = function(state){
         if(this.overlayType != "video")return
         var video = this.plane.material.map.image
@@ -288,14 +372,17 @@ var initOverlay = function(THREE) {
                 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()
@@ -309,7 +396,7 @@ var initOverlay = function(THREE) {
                     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++){
+                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){
@@ -317,11 +404,26 @@ var initOverlay = function(THREE) {
                     }
                 }
             }
-        }else{
+        }else{//飞出要判断模型阻挡，有点耗时就算了
             return true
         }
     }
     
+    Overlay.prototype.update = function(){//实时监测播放
+        if(this.overlayType == "video"){
+            if(this.visible && !this.pausedByUser && this.inSight()){
+                this.videoControl(true) 
+            }else{
+                this.videoControl(false) 
+            }
+        }else if(this.animateInfo){ 
+            if(this.visible && this.inSight()){
+                GifTexDeal.start(this.animation)
+            }else{
+                GifTexDeal.stop(this.animation)
+            } 
+        }
+    }
     
     Overlay.prototype.addToLoadQueue = function() {
         if (this.overlayType == 'photo') {
@@ -339,7 +441,7 @@ var initOverlay = function(THREE) {
         var plane = this.plane;
 
         plane.material.map = Texture.load(this.file, ()=>{
-            plane.material.needsUpdate = true
+            
             if (this._loadDones) {
                 this._loadDones.forEach(e=>e())
                 this._loadDones = null
@@ -347,6 +449,13 @@ var initOverlay = function(THREE) {
             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;
@@ -437,3 +546,5 @@ var initOverlay = function(THREE) {
     window.Overlay = Overlay;
 
 }
+
+

SuperTwo791/js/main_2020_show.js

@@ -15716,7 +15716,7 @@ window.Modernizr = function(n, e, t) {
             }else{
                 u.texture1.value = defaultTex1;
                 u.texture2.value = defaultTex2;
-                console.log(this.sid)
+            
             }  
         }
         
@@ -22499,6 +22499,12 @@ window.Modernizr = function(n, e, t) {
                                 }else{
                                     overlay.videoControl(false) 
                                 }
+                            }else if(this.animateInfo){ 
+                                if(this.visible && this.inSight()){
+                                    GifTexDeal.start(this.animation)
+                                }else{
+                                    GifTexDeal.stop(this.animation)
+                                } 
                             }
                         })
                         

SuperTwo791/js/manage.js

@@ -413,6 +413,120 @@ function hotMatcher(data){
 
 
 
+var GifTexDeal = {
+    
+    animateObjects : [], 
+     
+    addAnimation : function(texture, owner, info, id){
+        var object = {
+            texture,
+            owner,
+            info,
+            id 
+        }
+        this.setRepeart(object)
+        this.animateObjects.push(object)
+        return object
+    },
+    remove : function(object){
+        var index = this.animateObjects.indexOf(object) 
+        if(index>-1){
+            this.stop(object)
+            object.texture.repeat.set(1,1) 
+            this.animateObjects.splice(index, 1)
+        }
+    },
+    setRepeart : function(object){
+        object.texture.repeat.set(1/object.info.cellXcount, 1/object.info.cellYcount)
+    },
+    start: function(object){ 
+        /* var b = this
+          , offset = this.cursor.material.map.offset
+          , f = function(a) {
+            return Math.floor(17 * a) / 17   //对应17个精灵图片段
+        };
+        b.canStartAnimation = !1,
+        this.cursorAnimate = new TWEEN.Tween(offset).to({
+            x: 1    //100%
+        }, 1e3).onStart(function() {
+            b.canStartAnimation = !1
+        }).onStop(function() {
+            b.canStartAnimation = !0,
+            this.x = 0,
+            offset.x = 0
+        }).onUpdate(function() {}).onComplete(function() {
+            done(),
+            offset.x = 0,
+            setTimeout(function() {
+                b.canStartAnimation = !0
+            }, 1500)
+        }),
+        this.cursorAnimate.easing(f),
+        this.cursorAnimate.start()
+ */ 
+          
+        if(!object || object.started)return;
+        var count = object.info.cellXcount * object.info.cellYcount
+        
+        if(count == 1 )return;
+        
+        transitions.start( (progress)=>{
+            var index = Math.floor(count * progress);
+            var indexX =  index % object.info.cellXcount
+            var indexY =  object.info.cellYcount - Math.floor(index / object.info.cellXcount ) - 1;  //uv.offset.y是从下到上的
+            object.texture.offset.x = indexX / object.info.cellXcount;
+            object.texture.offset.y = indexY / object.info.cellYcount;
+            
+            //console.log(object.id + " : "+ object.texture.offset.toArray())
+        } , object.info.duration, ()=>{//done
+            object.started = false
+            object.texture.offset.x = 0;
+            object.texture.offset.y = 0;
+            this.start(object)
+        }, 0 ,null, object.id, "gif_"+object.id); 
+
+        object.started = true
+
+    },
+    
+    startAnimations : function(o={}){
+        this.animateObjects.forEach(e=>{this.start(e)})
+
+    }
+    ,
+    stop: function(object){ 
+        if(!object || !object.started)return;
+        transitions.cancelById("gif_"+object.id);
+        object.texture.offset.set(0,0)    
+        object.started = false
+    }
+}
+
+var CloneObject = function(copyObj, result, isSimpleCopy) {
+    //isSimpleCopy只复制最外层
+    //复制json		result的可能：普通数字或字符串、普通数组、复杂对象
+    if(!copyObj)return null
+    result = result || {};
+    if (copyObj instanceof Array) {
+        if (copyObj[0]instanceof Object) {
+            //不支持含有 [[Object]] 这样二级数组里面还是复杂数据的，普通和复杂的数据混合可能也不支持
+            console.error("不支持含有 [[Object]] 这样二级数组里面还是复杂数据的...")
+        }
+        return copyObj.slice(0);
+        //如果是数组，直接复制返回（排除数组内是object
+    }
+    for (var key in copyObj) {
+        if (copyObj[key]instanceof Object && !isSimpleCopy)
+            result[key] = CloneObject(copyObj[key]);
+        else
+            result[key] = copyObj[key];
+        //如果是函数类同基本数据，即复制引用
+    }
+    return result;
+}
+;
+
+
 
 //兼容一代的場景
 //請求地址統一管理

SuperTwo791/js/overlay.js

@@ -251,6 +251,18 @@ var initOverlay = function(THREE) {
         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)
+            }    
+        }
+        
+        
     }
 
 
@@ -448,7 +460,7 @@ var initOverlay = function(THREE) {
         var plane = this.plane;
 
         plane.material.map = Texture.load(this.file, ()=>{
-            plane.material.needsUpdate = true
+            
             if (this._loadDones) {
                 this._loadDones.forEach(e=>e())
                 this._loadDones = null
@@ -456,6 +468,13 @@ var initOverlay = function(THREE) {
             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;

edit-backstage/css/lzb.css

@@ -305,10 +305,11 @@ ul.MenuOptions li.chosen {
 }
 
 .toolRight .editText {
-    height: 200px !important;
+    min-height: 200px !important;
     line-height: 130% !important;
     padding: 10px;
     text-align: justify;
+    resize: vertical;
 }
 
 @keyframes warnFlash {
@@ -1921,4 +1922,19 @@ ul.MenuOptions li.chosen {
     width: 45px !important;
     height: 45px !important;
     margin:1px;
+}
+
+
+.toolRight #gifInfoEdit{
+    text-align : left; 
+}
+.toolRight #gifInfoEdit input {
+    width: 49px;
+    height:25px;
+    margin:0 4px;
+    padding: 0 1px;
+    text-align: center;
+}
+.toolRight #gifInfoEdit span {
+    margin:0 3px;  
 }

edit-backstage/edit_zh.html

@@ -103,6 +103,10 @@
                         <span class="panoVisible"></span>
                         <label>小地图</label>
                     </li>
+                    <li data-name="panoLog">
+                        <span class="panoVisible"></span>
+                        <label>漫游点位</label>
+                    </li>
                 </ul>
             </div>
             <div class="toolMid">
@@ -934,7 +938,7 @@
                                 <span>热点大小 (初始值为1)</span>
                             </div>
                             <ul id="hotIconScale" class="clearfix hotStyle-item colorWrap">
-                                <input class="" type="number" placeholder="请输入热点大小比例" value="1" max="1.5" min="0.1"
+                                <input class="" type="number" placeholder="请输入热点大小比例" value="1" max="100" min="0.1"
                                     step="0.1">
                             </ul>
                         </li>
@@ -1046,7 +1050,7 @@
                                     </ul>
                                     <div id="userHotScale" class="hide">
                                         <ul id="hotIconScale_2" class="clearfix hotStyle-item colorWrap">
-                                            <input class="" type="number" placeholder="请输入热点大小比例" value="1" max="1.5" min="0.1" step="0.1">
+                                            <input class="" type="number" placeholder="请输入热点大小比例" value="1" max="100" min="0.1" step="0.1">
                                         </ul>
                                     </div>
                                 </li>
@@ -1599,6 +1603,25 @@
                         </li>
                     </ul>
                 </div>
+                <div class="panoLog content hide">
+                    <ul class="view-setting">
+                        <li>
+                            <!-- <div class="itemTitle"><span>漫游点位</span></div> -->
+                            <div class="remark">此面板会展示选中的漫游点id</div> 
+                            <textarea placeholder="请选择漫游点" id="panosIdShow" readonly="readonly" class="editText"></textarea>
+                            
+                             
+                        </li>
+                        <li>
+                        <div class="itemTitle"><span>点位标签颜色</span></div>
+                            <ul class="clearfix  colorWrap">
+                                <input id="panoIdColorTex" class="color-text" type="text"  />
+                                <input id="panoIdColor" type="color" />
+                            </ul>
+                        
+                        </li>
+                    </ul>
+                </div>
                 <div class="overlay content hide">
                     <ul>
                         <li class="addBtn">
@@ -1650,8 +1673,29 @@
                                 </ul>
                                 
                             </li>
-
-
+                            <li id="gifEdit">
+                                <div class="itemTitle">
+                                    <span data-lang="">设置动画</span> 
+                                </div>
+                                
+                                <ul id="gifSwitch" class="switch clearfix hotStyle-item colorWrap">
+                                    <label><input class="mui-switch mui-switch-animbg" type="checkbox">
+                                        是否开启
+                                    </label> 
+                                </ul>
+                                
+                                <div id="gifInfoEdit" style='display:none'>
+                                    横向 <input id="gifXCount"></input> 张 （ 宽<input id="gifCellWidth">px ）<br>
+                                    纵向 <input id="gifYCount"></input> 张 （ 高<input id="gifCellHeight">px ）<br>
+                                    共<span id='gifFrameCount'></span>帧，总宽<span id='gifImgWidth'></span>px， 总高<span id='gifImgHeight'></span>px<br>
+                                    时长 <input id="gifDuration"></input> 秒（ 帧率 <input id="gifFps" style=></input> ）<br>
+                                    
+                                    <!-- <input  class="editCheckbox" type="checkbox" value="loadlogo" id="loopGif"></input> -->
+                                </div>
+                                
+                                <label class="remark">注：1 精灵贴图的排列顺序为从左到右、从上到下。   2 图片最长边尽量不大于2048px，因部分手机gpu性能有限。 </label>
+                                
+                            </li>
 
                             <li>
                                 <div class="itemTitle">

edit-backstage/js/css/cropper.min.css

@@ -1,252 +0,0 @@
-/*!
- * Cropper v3.1.3
- * https://github.com/fengyuanchen/cropper
- *
- * Copyright (c) 2014-2017 Chen Fengyuan
- * Released under the MIT license
- *
- * Date: 2017-10-21T10:03:37.133Z
- */.cropper-container {
- direction:ltr;
- font-size:0;
- line-height:0;
- position:relative;
- -ms-touch-action:none;
- touch-action:none;
- -webkit-user-select:none;
- -moz-user-select:none;
- -ms-user-select:none;
- user-select:none
-}
-.cropper-container img {
- display:block;
- height:100%;
- image-orientation:0deg;
- max-height:none!important;
- max-width:none!important;
- min-height:0!important;
- min-width:0!important;
- width:100%
-}
-.cropper-canvas,.cropper-crop-box,.cropper-drag-box,.cropper-modal,.cropper-wrap-box {
- bottom:0;
- left:0;
- position:absolute;
- right:0;
- top:0
-}
-.cropper-canvas,.cropper-wrap-box {
- overflow:hidden
-}
-.cropper-drag-box {
- background-color:#fff;
- opacity:0
-}
-.cropper-modal {
- background-color:#000;
- opacity:.5
-}
-.cropper-view-box {
- display:block;
- height:100%;
- outline-color:rgba(51,153,255,.75);
- outline:1px solid #39f;
- overflow:hidden;
- width:100%
-}
-.cropper-dashed {
- border:0 dashed #eee;
- display:block;
- opacity:.5;
- position:absolute
-}
-.cropper-dashed.dashed-h {
- border-bottom-width:1px;
- border-top-width:1px;
- height:33.33333%;
- left:0;
- top:33.33333%;
- width:100%
-}
-.cropper-dashed.dashed-v {
- border-left-width:1px;
- border-right-width:1px;
- height:100%;
- left:33.33333%;
- top:0;
- width:33.33333%
-}
-.cropper-center {
- display:block;
- height:0;
- left:50%;
- opacity:.75;
- position:absolute;
- top:50%;
- width:0
-}
-.cropper-center:after,.cropper-center:before {
- background-color:#eee;
- content:" ";
- display:block;
- position:absolute
-}
-.cropper-center:before {
- height:1px;
- left:-3px;
- top:0;
- width:7px
-}
-.cropper-center:after {
- height:7px;
- left:0;
- top:-3px;
- width:1px
-}
-.cropper-face,.cropper-line,.cropper-point {
- display:block;
- height:100%;
- opacity:.1;
- position:absolute;
- width:100%
-}
-.cropper-face {
- background-color:#fff;
- left:0;
- top:0
-}
-.cropper-line {
- background-color:#39f
-}
-.cropper-line.line-e {
- cursor:e-resize;
- right:-3px;
- top:0;
- width:5px
-}
-.cropper-line.line-n {
- cursor:n-resize;
- height:5px;
- left:0;
- top:-3px
-}
-.cropper-line.line-w {
- cursor:w-resize;
- left:-3px;
- top:0;
- width:5px
-}
-.cropper-line.line-s {
- bottom:-3px;
- cursor:s-resize;
- height:5px;
- left:0
-}
-.cropper-point {
- background-color:#39f;
- height:5px;
- opacity:.75;
- width:5px
-}
-.cropper-point.point-e {
- cursor:e-resize;
- margin-top:-3px;
- right:-3px;
- top:50%
-}
-.cropper-point.point-n {
- cursor:n-resize;
- left:50%;
- margin-left:-3px;
- top:-3px
-}
-.cropper-point.point-w {
- cursor:w-resize;
- left:-3px;
- margin-top:-3px;
- top:50%
-}
-.cropper-point.point-s {
- bottom:-3px;
- cursor:s-resize;
- left:50%;
- margin-left:-3px
-}
-.cropper-point.point-ne {
- cursor:ne-resize;
- right:-3px;
- top:-3px
-}
-.cropper-point.point-nw {
- cursor:nw-resize;
- left:-3px;
- top:-3px
-}
-.cropper-point.point-sw {
- bottom:-3px;
- cursor:sw-resize;
- left:-3px
-}
-.cropper-point.point-se {
- bottom:-3px;
- cursor:se-resize;
- height:20px;
- opacity:1;
- right:-3px;
- width:20px
-}
-@media (min-width:768px) {
- .cropper-point.point-se {
-  height:15px;
-  width:15px
- }
-}
-@media (min-width:992px) {
- .cropper-point.point-se {
-  height:10px;
-  width:10px
- }
-}
-@media (min-width:1200px) {
- .cropper-point.point-se {
-  height:5px;
-  opacity:.75;
-  width:5px
- }
-}
-.cropper-point.point-se:before {
- background-color:#39f;
- bottom:-50%;
- content:" ";
- display:block;
- height:200%;
- opacity:0;
- position:absolute;
- right:-50%;
- width:200%
-}
-.cropper-invisible {
- opacity:0
-}
-.cropper-bg {
- background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC")
-}
-.cropper-hide {
- display:block;
- height:0;
- position:absolute;
- width:0
-}
-.cropper-hidden {
- display:none!important
-}
-.cropper-move {
- cursor:move
-}
-.cropper-crop {
- cursor:crosshair
-}
-.cropper-disabled .cropper-drag-box,.cropper-disabled .cropper-face,.cropper-disabled .cropper-line,.cropper-disabled .cropper-point {
- cursor:not-allowed
-}
-/*# sourceMappingURL=cropper.min.css.map */

edit-backstage/js/edit.js

@@ -101,6 +101,9 @@ EditTools.prototype.active = function() {
         case "panoVisible":
             VisiSet.finishSetPanoVisible()
             break;
+        case "panoLog":
+            VisiSet.finishSetPanoLog()
+            break;    
         case "screen":
             confirmSnap.addClass("hide").removeClass("unable");
             snapshotGui.hide();
@@ -119,6 +122,11 @@ EditTools.prototype.active = function() {
             VisiSet.enterSet(VisiSet.beginSetPanoVisible.bind(VisiSet))
 
             break;
+        case "panoLog":
+            $(".toolLeft").addClass("unable")
+            VisiSet.enterSet(VisiSet.beginSetPanoLog.bind(VisiSet))
+
+            break;    
         case "screen":
             confirmSnap.removeClass("hide");
             $('#camera-start').text("点此设置为初始画面")
@@ -527,6 +535,16 @@ function initColorElem(data, elem) {
     if (data.showCad) {
         $('input[name="show-cad"]').trigger('change')
     }
+    $('#panoIdColor').on('change', function(e) {
+        $('#panoIdColorTex').val(e.target.value)
+        VisiSet.changePanoIdColor(e.target.value)
+    })
+    $('#panoIdColorTex').on('blur keydown', function(e) {
+        (e.type === 'blur' || e.type === 'keydown' && e.keyCode === 13) && setColor(e, $('#panoIdColor'), this);
+        VisiSet.changePanoIdColor(e.target.value)
+    })
+    $('#panoIdColor').val('#c13e3e')//初始颜色
+    $('#panoIdColorTex').val('#c13e3e')
 }
 
 
@@ -1502,7 +1520,7 @@ Hotpoint.prototype.inputList = function(text, val) {
 }
 //添加热点模型
 Hotpoint.prototype.addModel = function() {
-    var text = this.inputList("请填写模型链接");
+    var text = this.inputList("请填写模型链接（https开头）");
     this.hotpointDetail.find(".model .add").on('click', function() {
         $(this).closest(".model").find(".list").append(text)
     });
@@ -3440,6 +3458,14 @@ var EditOverlay = {
                     //$('#overlayUpload .preview').css('background-image',"").append($(video));
                    
                     this.useImgRatio()
+                    this.updateGifPanel(this.editPlane)
+                    
+                    if(this.editPlane.animateInfo){
+                        GifTexDeal.remove(this.editPlane.animation)
+                        this.editPlane.animation = GifTexDeal.addAnimation(this.editPlane.plane.material.map, this.editPlane, this.editPlane.animateInfo, this.editPlane.sid)
+                        GifTexDeal.start(this.editPlane.animation)
+                    }
+                   
                     //自适应比例 
                     this.editPlane.file = photo.file;
                     plane.material.opacity = 1;
@@ -3460,11 +3486,190 @@ var EditOverlay = {
             else {
                 this.getOverlayInfo(overlay)
             }
-              
             this.addToList(overlay)
-        }
-        )
+        } )
         
+        $("#gifSwitch input").on("change",  (e)=>{
+            var on = $("#gifSwitch input").is(':checked');
+            $("#gifInfoEdit").css({display: on ? 'block' : 'none'})
+            if(on){
+                EditOverlay.editPlane.animateInfo = {
+                    cellXcount : parseInt($("#gifXCount").val()),
+                    cellYcount : parseInt($("#gifYCount").val()),
+                    loop : true,
+                    duration : parseFloat($("#gifDuration").val()) * 1000
+                }  
+                EditOverlay.editPlane.animation = GifTexDeal.addAnimation(EditOverlay.editPlane.plane.material.map, EditOverlay.editPlane, EditOverlay.editPlane.animateInfo, EditOverlay.editPlane.sid)       
+                GifTexDeal.start(EditOverlay.editPlane.animation)
+            }else{
+                GifTexDeal.remove(EditOverlay.editPlane.animation) 
+                EditOverlay.editPlane.animateInfo = null
+            }
+        })  
+
+        
+        {//gif动画  input
+        
+            let strictInputNum = function(e, precision, min=0,max){//precision：保留小数位数
+                var value = e.target.value.trim(); 
+                var lastOne = value[value.length-1];
+                var preContent = value.substr(0,value.length-1)
+                var hasPoint = precision > 0 && lastOne == '.' ; 
+                 
+                var a = Math.pow(10, precision)
+                value = parseFloat(value) || 0;
+                if(isNaN(value)){
+                    e.target.value = preContent //还原
+                    return
+                }
+                e.target.value =  Math.max(min, parseInt(value * a) / a )
+                
+                hasPoint && (e.target.value += '.')//补小数点
+            }
+            let changeAnimation = function(){
+                GifTexDeal.setRepeart(EditOverlay.editPlane.animation)
+               
+            }
+            let restartAnimation = function(){
+                GifTexDeal.stop(EditOverlay.editPlane.animation)
+                GifTexDeal.start(EditOverlay.editPlane.animation)
+            }
+            let changeFrameCount = function(){
+                var a = EditOverlay.editPlane.animateInfo
+                var frameCount = a.cellXcount * a.cellYcount
+                $("#gifFrameCount").text(frameCount)
+                var fps = parseFloat($("#gifFps").val())
+                a.duration = frameCount / fps * 1000
+                $("#gifDuration").val(toPrecision(a.duration/1000, 2))
+                 
+            }
+            
+            let gifXCountFun = function(value){
+                EditOverlay.editPlane.animateInfo.cellXcount = value 
+                var gifImgWidth = parseFloat($("#gifImgWidth").text())
+                var gifCellWidth = toPrecision(gifImgWidth / EditOverlay.editPlane.animateInfo.cellXcount,1);
+                $("#gifCellWidth").val(gifCellWidth)
+                changeFrameCount()
+                changeAnimation()
+            }
+           
+            $("#gifXCount").on('input',(e)=>{
+                strictInputNum(e, 0) 
+                gifXCountFun(parseFloat(e.target.value))
+                
+            })
+            $("#gifXCount").on('change',(e)=>{
+                strictInputNum(e, 0, 1) 
+                gifXCountFun(parseFloat(e.target.value))
+                restartAnimation()
+            })
+            
+            
+            let gifYCountFun = function(value){
+                EditOverlay.editPlane.animateInfo.cellYcount = value 
+                var gifImgHeight = parseFloat($("#gifImgHeight").text())
+                var gifCellHeight = toPrecision(gifImgHeight / EditOverlay.editPlane.animateInfo.cellYcount,1);
+                $("#gifCellHeight").val(gifCellHeight)
+                changeFrameCount()
+                changeAnimation()
+            }
+            $("#gifYCount").on('input',(e)=>{
+                strictInputNum(e, 0)
+                gifYCountFun(parseFloat(e.target.value))
+            })
+            $("#gifYCount").on('change',(e)=>{
+                strictInputNum(e, 0, 1)
+                gifYCountFun(parseFloat(e.target.value))
+                changeAnimation()
+                restartAnimation()
+            })
+          
+          
+            let gifCellWidthFun = function(value){
+                var gifCellWidth = value;
+                var gifImgWidth = parseFloat($("#gifImgWidth").text())
+                var cellXcount = toPrecision(gifImgWidth / gifCellWidth,2);
+                $("#gifXCount").val(cellXcount)
+                changeAnimation()
+            }
+            $("#gifCellWidth").on('input',(e)=>{
+                strictInputNum(e, 0)
+                gifCellWidthFun(parseFloat(e.target.value))
+                
+            })
+            $("#gifCellWidth").on('change',(e)=>{
+                strictInputNum(e, 0, 1)
+                gifCellWidthFun(parseFloat(e.target.value))
+                var cellXcount = $("#gifXCount").val();
+                var cellXcountInt = Math.round(cellXcount)
+                if(cellXcountInt != cellXcount){
+                    $("#gifXCount").val(cellXcountInt)
+                    gifXCountFun(cellXcountInt)
+                    changeAnimation()
+                }
+                restartAnimation()
+            }) 
+            
+            
+            let gifCellHeightFun = function(value){
+                var gifCellHeight = parseFloat(e.target.value);
+                var gifImgHeight = parseFloat($("#gifImgHeight").text())
+                var cellYcount = toPrecision(gifImgHeight / gifCellHeight,2);
+                $("#gifYCount").val(cellYcount) 
+                
+            } 
+            $("#gifCellHeight").on('input',(e)=>{
+                strictInputNum(e, 0)
+                gifCellHeightFun(parseFloat(e.target.value))
+                
+            })
+            $("#gifCellHeight").on('change',(e)=>{
+                strictInputNum(e, 0, 1)
+                gifCellHeightFun(parseFloat(e.target.value))
+                var cellYcount = $("#gifYCount").val();
+                var cellYcountInt = Math.round(cellYcount)
+                if(cellYcountInt != cellYcount){
+                    $("#gifYCount").val(cellYcountInt)
+                    gifYCountFun(cellYcountInt)
+                    changeAnimation()
+                }  
+                restartAnimation()        
+            })
+             
+             
+            let gifDurationFun = function(value){
+                var a = EditOverlay.editPlane.animateInfo 
+                let frameCount = a.cellXcount * a.cellYcount
+                a.duration = value
+                $("#gifFps").val(toPrecision(frameCount / a.duration * 1000, 1))
+            } 
+            $("#gifDuration").on('input',(e)=>{
+                strictInputNum(e, 1);
+                gifDurationFun(parseFloat(e.target.value) * 1000)
+            })
+            $("#gifDuration").on('change',(e)=>{
+                strictInputNum(e, 1, 0.01);
+                gifDurationFun(parseFloat(e.target.value) * 1000)
+                restartAnimation()
+            })
+            
+            var gifFpsFun = function(e){
+                strictInputNum(e, 0, 1);
+                var fps = parseFloat(e.target.value)
+                var a = EditOverlay.editPlane.animateInfo 
+                let frameCount = a.cellXcount * a.cellYcount
+                a.duration = frameCount / fps * 1000
+                $("#gifDuration").val(toPrecision(a.duration / 1000, 2))
+            }
+            $("#gifFps").on('input',(e)=>{
+                gifFpsFun(e)
+                
+            })
+            $("#gifFps").on('change',(e)=>{
+                gifFpsFun(e)
+                restartAnimation()
+            })
+        }
         
         
     },
@@ -3483,7 +3688,9 @@ var EditOverlay = {
     switchEditType : function(type){
         this.editType = type;
         $('#overlayUpload [name="upload"] button').text(type == 'video' ? "上传视频" : "上传图片")  
-        $('#overlayUpload .preview span').text(type == 'video' ? "支持MP4、MOV等，＜20M" : "支持jpg、png等，＜20M");
+        $('#overlayUpload .preview span').eq(0).text(type == 'video' ? "支持MP4、MOV等，＜20M" : "支持jpg、png等，＜20M");
+        if(type != 'photo' || !this.editPlane) $('#overlayProp #gifEdit').css({display: 'none'})
+         
     },
     beginToAddPlane: function(event) {
         this.switchEditType($(event.target).attr("data-type"))   
@@ -3548,26 +3755,17 @@ var EditOverlay = {
         });
         $('#overlayUpload .preview [attr-type="width"]').text(toPrecision(overlay.width, 2))
         $('#overlayUpload .preview [attr-type="height"]').text(toPrecision(overlay.height, 2))
-
+        $("#gifSwitch input").prop('checked', !!overlay.animateInfo);
+        $("#gifInfoEdit").css({display: !!overlay.animateInfo ? 'block' : 'none'})
     },
-    updateOverlayPanel: function(overlay) {
-        this.editPlane = overlay;
-        overlay.requestDownload()
-        
-        if(overlay._loadDones){
-            $('.waiting').addClass('showloading');
-            overlay._loadDones.push(()=>{
-                $('.waiting').removeClass('showloading');
-            })
-        }
-        
-        
-        
+    
+    
+    updateOverlayPreview : function(overlay){
         var plane = overlay.plane
         var src = plane.material.map && (plane.material.map.image ? plane.material.map.image.src : overlay.fileSrc );
         $('#overlayUpload .preview video').remove();
         
-        overlay.overlayType && this.switchEditType(overlay.overlayType)
+                                                                       
         
         
         if (overlay.overlayType == "video") {
@@ -3577,7 +3775,7 @@ var EditOverlay = {
         } else if(overlay.overlayType == "photo" || overlay.overlayType == "text"){
             $('#overlayUpload .preview').css({
                 'background-image': src ? ("url(" + src + ")") : "",
-                'background-size': "contain"
+                'background-size': "100% 100%"
             })
         }else{
             $('#overlayUpload .preview').css({ 
@@ -3594,8 +3792,18 @@ var EditOverlay = {
             $('#overlayUpload [name="useImgRatio"]').addClass("hide")
             $('#overlayUpload .preview').removeClass('uploaded')
         }
-
-        this.updateOverlayScaleDisplay()
+    }
+    ,
+    
+    
+    
+    updateOverlayPanel: function(overlay) {
+        overlay.overlayType && this.switchEditType(overlay.overlayType)
+        this.updateOverlayPreview(overlay) 
+        this.updateOverlayScaleDisplay() 
+        this.updateGifPanel(overlay)
+        
+      
 
         if (overlay.hasBox) {
             this.scroller.videoDepth.setValue(overlay.scale.z * settings.overlay.depth * 100, true)
@@ -3612,10 +3820,58 @@ var EditOverlay = {
     },
     
     //----------------------------
-    
-    
-    
-    
+    updateGifPanel : function(overlay){ 
+        if(this.editType == 'photo'){
+            if(!overlay.plane.material.map)return;
+            $('#overlayProp #gifEdit').css({display: 'block'})
+         
+            let w = overlay.plane.material.map.image.width
+            let h = overlay.plane.material.map.image.height
+            if(overlay.animateInfo){
+                let a = overlay.animateInfo
+                $("#gifXCount").val(a.cellXcount);
+                $("#gifYCount").val(a.cellYcount);
+                $("#gifImgWidth").text(w)
+                $("#gifImgHeight").text(h)
+                $("#gifCellWidth").val(toPrecision(w / a.cellXcount, 2));
+                $("#gifCellHeight").val(toPrecision(h / a.cellYcount, 2));
+                let frameCount = a.cellXcount * a.cellYcount
+                $("#gifFrameCount").text(frameCount) 
+                $("#gifDuration").val(toPrecision(a.duration / 1000, 2));
+                $("#gifFps").val(toPrecision(frameCount / a.duration * 1000, 1) );  
+            }else{
+                $("#gifXCount").val(1);
+                $("#gifYCount").val(1);
+                $("#gifImgWidth").text(w)
+                $("#gifImgHeight").text(h)
+                $("#gifCellWidth").val(w);
+                $("#gifCellHeight").val(h) 
+                $("#gifFrameCount").text(1) 
+                $("#gifDuration").val(1);
+                $("#gifFps").val(1);  
+            }
+        }
+    }
+                    
+    ,
+    beginEdit :  function(overlay){
+        $('#overlayProp').removeClass('atRight').removeClass('hide')
+        this.endAddPlane();
+        this.editPlane = overlay;
+        
+        
+        overlay.requestDownload() 
+        if(overlay._loadDones){
+            $('.waiting').addClass('showloading');
+            overlay._loadDones.push(()=>{
+                $('.waiting').removeClass('showloading');
+            })
+        }
+        overlay.visible = true
+        this.updateOverlayPanel(overlay)  
+        transformControls.attach(overlay)      
+    }
+    ,
     panoPosSwitchOnChange : function(){
         var on = this.panoPosSwitch.is(':checked')
          
@@ -3695,7 +3951,7 @@ var EditOverlay = {
         if (type == 'cancel') {
             if (!this.editPlane.isNew && !this.editPlane.needDelete)
                 this.editPlane.setFromInfo(this.editPlane.info)
-                //this.setOverlayFromInfo(this.editPlane, this.editPlane.info);//恢复
+                
             else
                 this.disposeOverlay(this.editPlane);
             //删除	
@@ -3741,7 +3997,7 @@ var EditOverlay = {
         
         this.updateScale()
         
-        this.updateOverlayPanel(this.editPlane)
+        this.updateOverlayPreview(this.editPlane)
     },
      
     getOverlayInfo: function(overlay) {
@@ -3769,6 +4025,9 @@ var EditOverlay = {
             hasBox: overlay.hasBox,
             transformAtPanos:  transformAtPanos
         }
+        if(overlay.animateInfo ){
+            overlay.info.animateInfo = CloneObject(overlay.animateInfo)  
+        }
     },
 
     getSavingInfo: function(overlay) {
@@ -3795,8 +4054,13 @@ var EditOverlay = {
             hasBox: overlay.hasBox ? 1 : 0,
             media: [overlay.overlayType], 
             file: overlay.fileSrc || overlay.plane.material.map.image.src,
-            transformAtPanos : transformAtPanos
+            transformAtPanos : transformAtPanos,
+            
         }
+        if(overlay.animateInfo && overlay.animateInfo.cellXcount * overlay.animateInfo.cellYcount > 1){
+            info.animateInfo = overlay.animateInfo    
+        }
+        
 
         return info
 
@@ -3849,7 +4113,9 @@ var EditOverlay = {
         plane.material.dispose();
         overlay.parent.remove(overlay);
         this.removeFromList(overlay)
-
+        if(this.animation){
+            GifTexDeal.remove(this.animation)
+        }
         //this.beginToAddPlane()
 
     },
@@ -3913,6 +4179,7 @@ var VisiSet = {
         green: "#00c8ae"
     },
     init: function() {
+        this.footIconSizeRatio =  Math.max(player.model.size.x, player.model.size.z)  / 30; 
         this.meshGroup = new THREE.Object3D;
         this.meshGroup.name = "setVisible-group"
         player.model.add(this.meshGroup)
@@ -4003,6 +4270,79 @@ var VisiSet = {
             enter()
 
     },
+    beginSetPanoLog: function() {
+        player.flying || $(".toolLeft").removeClass("unable")
+        if (this.setPanoLog)
+            return; 
+        this.setPanoLog = true
+        this.panosSelect = []
+        this.updateFootIconSize()
+        this.showFootIcons(null, true);
+        
+        for(let i in player.model.hots){
+            player.model.hots[i].visi_ = player.model.hots[i].mesh.visible;
+            player.model.hots[i].mesh.visible = false
+        } 
+        
+        
+        player.model.panos.forEach(e=>{
+            e.addTextSprite(e.id, $('#panoIdColorTex').val())
+        })
+    },
+    
+    finishSetPanoLog: function() {
+        //结束 退出这个设置
+        if (!this.setPanoLog)
+            return;
+        //否则会加多个侦听 
+        this.setPanoLog = false;
+
+        this.hideFootIcons();
+    
+        this.recoverAllState2(); 
+        this.panosSelect = null
+        player.flyoutType = null
+        
+        permitTranMode(true)
+        
+        
+        for(let i in player.model.hots){ 
+            player.model.hots[i].mesh.visible = player.model.hots[i].visi_
+        } 
+
+        $("#panosIdShow").val('')
+        
+        player.model.panos.forEach(e=>{
+            e.removeTextSprite()
+        })
+        
+        
+        
+    },
+    dealPanoLogClick: function(id) {
+        var panos = player.model.panos; 
+        
+        var index = this.panosSelect.indexOf(id)
+        if (index==-1) { 
+            this.changeFIconState(panos.index[id].footIcon, "linked" )
+            this.panosSelect.push(id)
+        }else{
+            this.changeFIconState(panos.index[id].footIcon,  false)
+            this.panosSelect.splice(index,1)
+        }
+        
+        
+        $("#panosIdShow").val(this.panosSelect.join(', '));         
+        
+    }
+    ,
+    changePanoIdColor:function(color){ 
+        player.model.panos.forEach(e=>{
+            e.removeTextSprite();
+            e.addTextSprite(e.id,color)
+        })  
+    }
+    ,
     beginSetPanoVisible: function() {
         player.flying || $(".toolLeft").removeClass("unable")
         if (this.setPanoVisible)
@@ -4602,8 +4942,8 @@ var VisiSet = {
         //根据相机位置 改变footIcon大小，使在范围内看到的热点大小一致，防止太小点击不到
         if (!this.footIcons)
             return;
-        var s = player.cameraControls.controls.floorplan.absoluteScale * 2.8;
-        s = THREE.Math.clamp(s, 0.5, 1.4);
+        var s = player.cameraControls.controls.floorplan.absoluteScale *  2.8
+        s = THREE.Math.clamp(s, 0.5 * this.footIconSizeRatio, 1.4 * this.footIconSizeRatio);
         this.footIcons.forEach(function(f) {
             try {
 
@@ -4805,29 +5145,7 @@ function permitTranMode(state) {
     state ? $(".pinBottom.left").removeClass('hide') : $(".pinBottom.left").addClass('hide');
 }
 
-CloneObject = function(copyObj, result, isSimpleCopy) {
-    //isSimpleCopy只复制最外层
-    //复制json		result的可能：普通数字或字符串、普通数组、复杂对象
-    result = result || {};
-    if (copyObj instanceof Array) {
-        if (copyObj[0]instanceof Object) {
-            //不支持含有 [[Object]] 这样二级数组里面还是复杂数据的，普通和复杂的数据混合可能也不支持
-            console.error("不支持含有 [[Object]] 这样二级数组里面还是复杂数据的...")
-        }
-        return copyObj.slice(0);
-        //如果是数组，直接复制返回（排除数组内是object
-    }
-    for (var key in copyObj) {
-        if (copyObj[key]instanceof Object && !isSimpleCopy)
-            result[key] = CloneObject(copyObj[key]);
-        else
-            result[key] = copyObj[key];
-        //如果是函数类同基本数据，即复制引用
-    }
-    return result;
-}
-;
-
+ 
 function randomWord(randomFlag, min, max) {
     //随机字符串
     var str = ""

edit-backstage/js/manage.js

@@ -413,6 +413,120 @@ function hotMatcher(data){
 
 
 
+var GifTexDeal = {
+    
+    animateObjects : [], 
+     
+    addAnimation : function(texture, owner, info, id){
+        var object = {
+            texture,
+            owner,
+            info,
+            id 
+        }
+        this.setRepeart(object)
+        this.animateObjects.push(object)
+        return object
+    },
+    remove : function(object){
+        var index = this.animateObjects.indexOf(object) 
+        if(index>-1){
+            this.stop(object)
+            object.texture.repeat.set(1,1) 
+            this.animateObjects.splice(index, 1)
+        }
+    },
+    setRepeart : function(object){
+        object.texture.repeat.set(1/object.info.cellXcount, 1/object.info.cellYcount)
+    },
+    start: function(object){ 
+        /* var b = this
+          , offset = this.cursor.material.map.offset
+          , f = function(a) {
+            return Math.floor(17 * a) / 17   //对应17个精灵图片段
+        };
+        b.canStartAnimation = !1,
+        this.cursorAnimate = new TWEEN.Tween(offset).to({
+            x: 1    //100%
+        }, 1e3).onStart(function() {
+            b.canStartAnimation = !1
+        }).onStop(function() {
+            b.canStartAnimation = !0,
+            this.x = 0,
+            offset.x = 0
+        }).onUpdate(function() {}).onComplete(function() {
+            done(),
+            offset.x = 0,
+            setTimeout(function() {
+                b.canStartAnimation = !0
+            }, 1500)
+        }),
+        this.cursorAnimate.easing(f),
+        this.cursorAnimate.start()
+ */ 
+          
+        if(!object || object.started)return;
+        var count = object.info.cellXcount * object.info.cellYcount
+        
+        if(count == 1 )return;
+        
+        transitions.start( (progress)=>{
+            var index = Math.floor(count * progress);
+            var indexX =  index % object.info.cellXcount
+            var indexY =  object.info.cellYcount - Math.floor(index / object.info.cellXcount ) - 1;  //uv.offset.y是从下到上的
+            object.texture.offset.x = indexX / object.info.cellXcount;
+            object.texture.offset.y = indexY / object.info.cellYcount;
+            
+            //console.log(object.id + " : "+ object.texture.offset.toArray())
+        } , object.info.duration, ()=>{//done
+            object.started = false
+            object.texture.offset.x = 0;
+            object.texture.offset.y = 0;
+            this.start(object)
+        }, 0 ,null, object.id, "gif_"+object.id); 
+
+        object.started = true
+
+    },
+    
+    startAnimations : function(o={}){
+        this.animateObjects.forEach(e=>{this.start(e)})
+
+    }
+    ,
+    stop: function(object){ 
+        if(!object || !object.started)return;
+        transitions.cancelById("gif_"+object.id);
+        object.texture.offset.set(0,0)    
+        object.started = false
+    }
+}
+
+var CloneObject = function(copyObj, result, isSimpleCopy) {
+    //isSimpleCopy只复制最外层
+    //复制json		result的可能：普通数字或字符串、普通数组、复杂对象
+    if(!copyObj)return null
+    result = result || {};
+    if (copyObj instanceof Array) {
+        if (copyObj[0]instanceof Object) {
+            //不支持含有 [[Object]] 这样二级数组里面还是复杂数据的，普通和复杂的数据混合可能也不支持
+            console.error("不支持含有 [[Object]] 这样二级数组里面还是复杂数据的...")
+        }
+        return copyObj.slice(0);
+        //如果是数组，直接复制返回（排除数组内是object
+    }
+    for (var key in copyObj) {
+        if (copyObj[key]instanceof Object && !isSimpleCopy)
+            result[key] = CloneObject(copyObj[key]);
+        else
+            result[key] = copyObj[key];
+        //如果是函数类同基本数据，即复制引用
+    }
+    return result;
+}
+;
+
+
 
 //兼容一代的場景
 //請求地址統一管理

edit-backstage/js/overlay.js

@@ -170,8 +170,10 @@ var initOverlay = function(THREE) {
                 plane.material.map.minFilter = THREE.LinearFilter;
                 plane.material.map.magFilter = THREE.LinearFilter;
                 plane.material.map.generateMipmaps = true;  */
-            } else
+            } else{
                 plane.material.map.image = info.media;
+                plane.material.map.needsUpdate = true
+            }
             this.file = info.file;
         }
         this.overlayType = info.type;
@@ -183,6 +185,17 @@ var initOverlay = function(THREE) {
         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)
+            }    
+        }
     }
 
 
@@ -321,8 +334,31 @@ var initOverlay = function(THREE) {
             return true
         }
     }
+    Overlay.prototype.switchPlay = function(state){//手动播放暂停 
+        this.pausedByUser = !state
+        
+        this.videoControl(state)
+       
+        
+    }
     
     
+    Overlay.prototype.update = function(){//实时监测播放
+        if(this.overlayType == "video"){
+            if(this.visible && !this.pausedByUser && this.inSight()){
+                this.videoControl(true) 
+            }else{
+                this.videoControl(false) 
+            }
+        }else if(this.animateInfo){ 
+            if(this.visible && this.inSight()){
+                GifTexDeal.start(this.animation)
+            }else{
+                GifTexDeal.stop(this.animation)
+            } 
+        }
+    }
+    
     Overlay.prototype.addToLoadQueue = function() {
         if (this.overlayType == 'photo') {
             Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this)
@@ -339,7 +375,7 @@ var initOverlay = function(THREE) {
         var plane = this.plane;
 
         plane.material.map = Texture.load(this.file, ()=>{
-            plane.material.needsUpdate = true
+             
             if (this._loadDones) {
                 this._loadDones.forEach(e=>e())
                 this._loadDones = null
@@ -347,6 +383,12 @@ var initOverlay = function(THREE) {
             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;