1

SuperTwo762/js/main_2020_show.js

@@ -16167,7 +16167,7 @@ window.Modernizr = function(n, e, t) {
             }else{
                 u.texture1.value = defaultTex1;
                 u.texture2.value = defaultTex2;
-                console.log(this.sid)
+               
             }  
         }
         
@@ -23048,15 +23048,9 @@ window.Modernizr = function(n, e, t) {
                         for(var i in this.model.hots){
                             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) 
-                                }
-                            }
-                        }) */
+                        if(this.mode == 'panorama')this.overlayGroup.children.forEach(overlay=>{
+                            overlay.update()
+                        })
                         
                     }
                 

SuperTwo762/js/manage.js

@@ -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;
 
 }
+
+