加动画

public/static/js/Hot.js

@@ -1363,11 +1363,20 @@ window.initHot = function(model) {
   }
 
   Hot.updateVisibles = function(panos) {
-    if (panos === true) {
+    /* if (panos === true) {
       model.hotGroup.children.forEach((e) => e.updateVisible(null, true));
     } else {
       model.hotGroup.children.forEach((e) => e.updateVisible(panos));
-    }
+    } */
+    // 更改：平面、三维视角，热点不可见。
+    if (panos === true) {
+      model.hotGroup.children.forEach((e) => e.updateVisible(null, true));
+    } else if(panos === false){ 
+        model.hotGroup.children.forEach((e) => e.updateVisible(null, false));
+    }else{
+      model.hotGroup.children.forEach((e) => e.updateVisible(panos));
+    } 
+    
   };
 
   Hot.beginShineHot = function() {

public/static/js/main_2020_show.js

@@ -3,6 +3,358 @@
   */
  
 
+//=================gif sprite=========
+window.animations = []
+
+
+var addModelBack = function(model){
+    let mat = new THREE.MeshBasicMaterial({side:1, color:0xffffff, transparent:true, opacity:0.5,
+       
+    }) 
+    let transparentModel = new THREE.Object3D;
+    transparentModel.visible = false
+    model.transparentModel = transparentModel
+    model.add(transparentModel)
+    model.chunks.forEach(chunk=>{
+        let chunkCopy = chunk.clone()
+        chunkCopy.material = mat
+        chunkCopy.name = 'model透明层' 
+        transparentModel.add(chunkCopy)
+    }) 
+}
+    
+var floorHeight = 0.01, spriteHeight = 1.1; 
+var spriteY = floorHeight + spriteHeight / 2  ;
+
+var createGuideAni = function(model){
+    var geo = new THREE.PlaneBufferGeometry(spriteHeight*0.75,  spriteHeight)
+    
+    
+    var tex1 = Texture.load('static/images/ani/HH_talk01.png')     //1.png')  
+    var tex2 = Texture.load('static/images/ani/ZZ_talk01.png')               //2.png')  
+    var tex3 = Texture.load('static/images/ani/HH_walk02.png')               //3.png')  
+    var tex4 = Texture.load('static/images/ani/ZZ_walk02.png')             //4.png')  
+    
+    
+    
+    var HH_talk03 = Texture.load('static/images/ani/HH_talk03.png')    
+    var HH_talk02 = Texture.load('static/images/ani/HH_talk02.png')    
+    var ZZ_talk03 = Texture.load('static/images/ani/ZZ_talk03.png')    
+    var ZZ_talk02 = Texture.load('static/images/ani/ZZ_talk02.png')    
+    
+    
+    
+    dealMap(tex1)
+    dealMap(tex2)
+    dealMap(tex3)
+    dealMap(tex4)
+    
+    var sprite1 = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ 
+        map: tex1,
+        side:2,
+        transparent:true,
+        depthTest:false
+    }))
+    sprite1.renderOrder = 999
+    
+    var sprite2 = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ 
+        map: tex2,
+        side:2,
+        transparent:true,
+        depthTest:false
+    })) 
+    sprite2.renderOrder = 999
+    
+    var animateInfo1 = { 
+        /* cellXcount : 12,
+        cellYcount : 9, 
+        loop : true,
+        duration : 4000,  */
+        cellXcount : 8,
+        cellYcount : 7, 
+        loop : true,
+        duration : 4000, 
+    }
+    var animateInfo2 = {
+        /* cellXcount : 10,
+        cellYcount : 7,
+        loop : true,
+        duration : 900,
+        maxCount: 67 */
+        
+        cellXcount : 8,
+        cellYcount : 6,
+        loop : true,
+        duration : 900, 
+    }
+    
+    var animateInfo3 = { 
+        cellXcount : 8,
+        cellYcount : 9,
+        loop : true,
+        duration : 4000, 
+    }
+    /* var animateInfo4 = { 
+        cellXcount : 8,
+        cellYcount : 6,
+        loop : true,
+        duration : 900, 
+    } */
+    
+    
+    var animation1 = GifTexDeal.addAnimation(tex1, sprite1, animateInfo1, "idle1" )
+    var animation2 = GifTexDeal.addAnimation(tex2, sprite2, animateInfo1, "idle2" )
+    var animation3 = GifTexDeal.addAnimation(tex3, sprite1, animateInfo2, "walk1" )
+    var animation4 = GifTexDeal.addAnimation(tex4, sprite2, animateInfo2, "walk2" )
+    
+    
+    var animation5 = GifTexDeal.addAnimation(HH_talk03, sprite1, animateInfo1, "idle3" )
+    var animation6 = GifTexDeal.addAnimation(ZZ_talk03, sprite2, animateInfo1, "idle4" )
+    var animation7 = GifTexDeal.addAnimation(HH_talk02, sprite1, animateInfo3, "idle5" )
+    var animation8 = GifTexDeal.addAnimation(ZZ_talk02, sprite2, animateInfo3, "idle6" )
+    
+    
+    
+    
+    model.add(sprite1)
+    model.add(sprite2)
+    //updatePose( sprite1,  sprite2)
+    sprite1.visible = false;
+    sprite2.visible = false;
+    
+    animations.push({
+        idleAnimation:[animation1, animation5, animation7],
+        walkAnimation:animation3,
+        mesh:sprite1,
+        //currentIdleAnimation:
+    }, {
+        idleAnimation:[animation2, animation6, animation8],
+        walkAnimation:animation4,
+        mesh:sprite2,
+    })
+} 
+
+var getRandomItem = function(arr){
+    let random = Math.random() 
+    return arr[Math.round(arr.length * random) % arr.length]
+}
+
+var startIdle = function(){
+    animations.forEach((e,i)=>{
+        e.mesh.visible = true; 
+        let a = getRandomItem(e.idleAnimation)
+        e.mesh.material.map = a.animation.texture
+        GifTexDeal.stop(e.walkAnimation)
+        GifTexDeal.start(a )
+        e.currentIdleAnimation = a
+        
+        console.log('animationIdle', i, 'use',  e.idleAnimation.indexOf(a))
+    })
+    updatePose(null,null)
+    
+}
+var startWalk = function(from, to){
+    animations.forEach(e=>{
+        e.mesh.material.map = e.walkAnimation.animation.texture
+        e.mesh.visible = true;
+        e.currentIdleAnimation && GifTexDeal.stop(e.currentIdleAnimation)
+        GifTexDeal.start(e.walkAnimation)
+        updateWalkAnimation(from, to, 0)
+    })
+}
+var stopAnimation = function(){
+    animations.forEach(e=>{ 
+        e.mesh.visible = false;
+        GifTexDeal.stop(e.idleAnimation)
+        GifTexDeal.stop(e.walkAnimation) 
+    }) 
+}
+
+
+ 
+var idleGap = Math.min(1.4, window.innerWidth / window.innerHeight * 0.8);//站着时的间隔
+var walkGap = 0.4;  
+
+const spriteDisToCamera = 2.8
+const disTpCameras = [
+    /* {
+        items: [[7,0],[7,1], [22,0],[22,1],  [19,0],[19,1], [26,0], [26,1]],   
+        dis: 1.6
+    }
+    ,
+    {
+        items: [[15,0]],  //137
+        dis: 2.1,
+        gap:-1
+    }
+    ,
+    {
+        items: [[15,1]],  //137
+        dis: 2.1,
+        gap:-0.56
+    } */
+]
+
+
+var getDisToCamera = function(){
+    /* if(disTpCameras[pano.id]){
+        return disTpCameras[pano.id]
+    }else return spriteDisToCamera */
+    var currentItem = player.director.currentItem;
+    var item = disTpCameras.find(e=>e.items.find(u=>currentItem[0] == u[0] && currentItem[1] == u[1] )   )
+    var result = item && {dis:item.dis, gap:item.gap}
+    if(item && item.gap){
+        var dis = item.dis || spriteDisToCamera
+        var zoomLevel = Math.max(player.model.getHeroDescriptorByIndex(currentItem).zoom||0,  player.zoomLevel  )
+        var x = Math.tan(THREE.Math.degToRad(player.baseFov * zoomLevel/2) ) / Math.tan(THREE.Math.degToRad(player.baseFov/2))   
+        
+        var minGap = idleGap / x * dis / spriteDisToCamera * 0.9
+        
+        result.gap = Math.min(Math.abs(item.gap), minGap) * Math.sign(item.gap);
+        
+    }
+    return result
+}
+/* var getGap = function(pano){ 
+    if(gaps[pano.id]){
+        return Math.min(Math.abs(gaps[pano.id]), idleGap) * Math.sign(gaps[pano.id]);
+    }else return 0
+} */
+
+var updateWalkAnimation = function(from, to){
+    //console.log('updateWalkAnimation')
+    var addProgress = 0.8;
+    
+    var pos, dir
+    var start = from, end = to;
+    var dis = 0;
+    dis += player.position.distanceTo(to.position);
+    var lastStart = start;
+    var gap = walkGap //間隔 
+    var disToCamera = spriteDisToCamera
+    
+    
+    
+    while(dis < disToCamera){ 
+        lastStart = start
+        start = end
+        let currentIndex = player.path.nodes.indexOf(end.id);
+        end = player.model.panos.index[player.path.nodes[currentIndex+1] ]
+        if(!end)break;
+        dis += start.position.distanceTo(end.position);
+        
+    }
+    if(!end ){ //离开路线，走到更前方
+        dir = player.getDirection()//拐弯       //start.position.clone().sub(lastStart.position).normalize()
+        var diff = disToCamera - dis //补全距离
+        pos = to.position.clone().add(dir.clone().multiplyScalar(diff)) 
+        gap  +=   diff / disToCamera*(idleGap-walkGap) //越接近目标点，gap渐变为站着时的gap
+        
+    }else{
+        let disBetween = start.position.distanceTo(end.position);
+        var diff = dis - disToCamera//退回距离
+        var ratio = diff / disBetween
+        
+        let currentDir = end.position.clone().sub(start.position).normalize()
+        dir = currentDir
+        if(ratio > 0.8){//上个点转弯
+            let currentIndex = player.path.nodes.indexOf(start.id);
+            let last = player.model.panos.index[player.path.nodes[currentIndex-1] ]
+            if(last){ 
+                var lastDir = start.position.clone().sub(last.position).normalize()
+                var middleDir = currentDir.clone().add(lastDir).normalize()
+                dir = currentDir.clone().multiplyScalar((1-ratio) / 0.2).add(middleDir.clone().multiplyScalar(1- (1- ratio)/0.2))
+                //console.log("上个点转弯"+dir.toArray())    
+            
+            } 
+           
+        }else if(ratio < 0.1){//下个点转弯
+            let currentIndex = player.path.nodes.indexOf(end.id);
+            let next = player.model.panos.index[player.path.nodes[currentIndex+1] ]
+            if(next){ 
+                var nextDir = next.position.clone().sub(end.position).normalize()
+            }else{
+                var nextDir = player.getDirection()//路线的末端， 渐变为相机角度
+                //console.log("延長转弯") 
+            }
+            var middleDir = currentDir.clone().add(nextDir).normalize()
+            dir = currentDir.clone().multiplyScalar(ratio / 0.1).add(middleDir.clone().multiplyScalar(1- ratio / 0.1))
+            //console.log("下个点转弯"+dir.toArray())    
+              
+        }
+        //console.log(dir)
+        pos = end.position.clone().sub(currentDir.clone().multiplyScalar(diff))
+        
+    } 
+     
+    updatePose(null,  null,   pos, dir  , gap  ,disToCamera)
+    
+    
+} 
+
+
+
+var updatePose = function( sprite1,   sprite2,   pos, dir, gap,  disToCamera){
+    //console.log('updatePose')
+    
+    sprite1 = sprite1 || animations[0].mesh
+    sprite2 = sprite2 || animations[1].mesh
+    var cameraPos = player.position.clone().setY(spriteY);
+    var lookAtCam 
+    var disToCamera = disToCamera || spriteDisToCamera
+    
+    var disInfo;
+    if(pos){//walk
+        dir = dir.setY(0).normalize().multiplyScalar(disToCamera);
+        pos.setY(spriteY)
+        //lookAtCam = true  //不然会比较斜
+    }else{//idle  
+        disInfo = getDisToCamera()
+        if(disInfo && disInfo.dis!=void 0) disToCamera = disInfo.dis
+        
+        dir =  player.getDirection().setY(0).normalize().multiplyScalar(disToCamera);
+        pos = new THREE.Vector3().addVectors(cameraPos, dir)
+    }
+    //间隔
+    /* if(disInfo && disInfo.gap!=void 0) { 
+        var shift = convertTool.getNormal({points:[{x:0,y:0},{x: dir.x, y: dir.z}]}) 
+        shift.multiplyScalar(disInfo.gap)
+        shift = new THREE.Vector3(shift.x, 0, shift.y)
+        sprite1.position.copy(pos.clone().sub(shift))
+    }else{
+        sprite1.position.copy(pos)
+    } */
+    
+    var shift = convertTool.getNormal({points:[{x:0,y:0},{x: dir.x, y: dir.z}]}) 
+    if(gap)shift.multiplyScalar(gap)
+    else{
+        shift.multiplyScalar(idleGap)
+    }    
+    shift = new THREE.Vector3(shift.x, 0, shift.y)
+    sprite1.position.copy(pos.clone().sub(shift))
+    sprite2.position.copy(pos.clone().add(shift)) 
+     
+     
+    
+     
+     
+    if(lookAtCam){
+        sprite1.lookAt(cameraPos)
+        sprite2.lookAt(cameraPos)
+    }else{
+        sprite1.lookAt(sprite1.position.clone().sub(dir))
+        sprite2.lookAt(sprite2.position.clone().sub(dir)) 
+    } 
+    
+}
+
+
+
+
+
+
+
+
 
 
 
@@ -3085,8 +3437,8 @@ window.Modernizr = function(n, e, t) {
             insideNear: .1,
             insideFar: 5e3,
             insideLookSpeed: .12,
-            insideLookLimitUp: 40,
-            insideLookLimitDown: -40,
+            insideLookLimitUp: 20,
+            insideLookLimitDown: -20,
             orthoNear: 1,
             orthoFar: 5e3,
             orthoBase: 10,
@@ -4965,7 +5317,7 @@ window.Modernizr = function(n, e, t) {
                 this.clearWalkingSectionPaused(),
                 this.resetSpecialTransition(),
                 this.emit("update.controls"))
-                
+                stopAnimation()
             }
             ,
             n.prototype.endTourProgress = function() {
@@ -17921,8 +18273,8 @@ window.Modernizr = function(n, e, t) {
                     
                 }
                 //---------   
-                
-                
+                createGuideAni(this)
+                addModelBack(this)
                 this.createFloorLogo()
                 
                 return O.debug("Done building model"),
@@ -20765,6 +21117,10 @@ window.Modernizr = function(n, e, t) {
             n.prototype.warpTravel_BLACK = function(e, t, i, n) {
                 var r = e || 0;
                 void 0 !== t && null !== t || (t = c.warp.teleportTime)
+                
+                stopAnimation()
+                
+                
                 //add
                 var done = ()=>{ 
                     Hot.updateVisibles([this.player.currentPano]) //更新热点显示
@@ -22856,10 +23212,25 @@ window.Modernizr = function(n, e, t) {
                         this.model.floorLogos[1].visible = true;
                         this.model.changefloorLogoOpa({index:1, opa:1, dur: 250})//this.model.floorLogoShow(1,250);
                     }
+                    
+                    if(this.director.tourIsPlaying){
+                        startWalk(this.currentPano, i)
+                        
+                    }
+                    
+                    
+                    
+                    
                     //=======================================
             
                     
                     aimQua && y.start(function(e) {
+                        if(this.director.tourIsPlaying){
+                            
+                            updateWalkAnimation(this.currentPano, i, e)
+                            
+                        }
+                        
                         S.copy(b),
                         v.quaternion(S, aimQua)(e),
                         M.copy(d.FORWARD).applyQuaternion(S).add(this.cameraControls.activeControl.camera.position),
@@ -23397,8 +23768,11 @@ window.Modernizr = function(n, e, t) {
                 }
                 
                 if(i == "panorama"){  
-                    this.transitionPos({type:"beforeFlyIn", pano:n, dur:I})//add                     
-                }else{  
+                    this.transitionPos({type:"beforeFlyIn", pano:n, dur:I})//add  
+                    this.model.transparentModel.visible = false                    
+                }else{
+                    Hot.updateVisibles(false)
+                    this.model.transparentModel.visible = true               
                     this.transitionPos({type:"beforeFlyOut",  dur:I/2})//add                       
                 }
                 
@@ -23515,7 +23889,7 @@ window.Modernizr = function(n, e, t) {
                     if(this.mode == u.PANORAMA){ 
                         Hot.updateVisibles([this.currentPano])
                     }else{ 
-                        Hot.updateVisibles(true)
+                        //Hot.updateVisibles(true)
                         this.model.hotGroup.children.forEach(overlay=>{
                             if(overlay.animateInfo){ 
                                 GifTexDeal.start(overlay.animation)
@@ -23727,7 +24101,7 @@ window.Modernizr = function(n, e, t) {
                     Log("rotTime "+rotTime +" at item "+this.director.currentItem,"#E8E") 
                 }
                  
-
+                startIdle();  
                 this.path.waitNextStep(e, function() {
                     t && t()
                 }.bind(this), rotTime)

public/static/js/manage.js

@@ -441,6 +441,40 @@ var convertTool = {
     }
     return null;
   },
+  
+    getNormal: function(line2d){//获取二维法向量 方向向内
+		var x,y;//要求的向量
+		//line2d的向量
+		var x1 = line2d.points[1].x - line2d.points[0].x;
+		var y1 = line2d.points[1].y - line2d.points[0].y;
+		//假设法向量的x或y固定为1或-1
+		if(y1 != 0){
+			x = 1;
+			y = - (x1 * x) / y1;
+		}else if(x1 != 0){//y如果为0，正常情况x不会是0
+			y = 1;
+			x = - (y1 * y) / x1;
+		}else{
+			console.log("两个点一样");
+			return null;
+		}
+		
+		//判断方向里或者外：
+		var vNormal = new THREE.Vector3(x, 0, y);
+		var vLine = new THREE.Vector3(x1, 0, y1);
+		var vDir = vNormal.cross(vLine);
+		if(vDir.y>0){
+			x *= -1;
+			y *= -1;
+		} 
+		return new THREE.Vector2(x, y).normalize();
+ 	},
+    
+ 
+
+ 
+
+  
 
   getPosAtSphere: function(pos3d, toPanoPos) {
     var dir = pos3d.clone().sub(toPanoPos);