加路线指引

public/static/js/main_2020_show.js

@@ -3,6 +3,241 @@
   */
  
 
+
+
+
+
+//路线
+  
+  var routeArray = ["0","7","6","5","4","8","9","11","32","31","30","28","47","48","61","62","80","77","78","92","117","116","95","94","107","108", "112","111","98","120","121","122","123","124","125","131","132","133","135","136","143","144","174","175","148","161","160","184","185","183","157","180","162","163","182","165","191","199","190","217","215","214","213","212","218","230","231","222","223","224","232","233","234","235","236","237"
+    ]
+    
+var arrows = []
+
+
+var arrowTex
+
+var createArrow = function(){
+    arrowTex || (arrowTex = Texture.load('static/images/arrow.png'))
+    var rot90 = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0,1,0), Math.PI/2); 
+    var arrow = new THREE.Mesh(new THREE.PlaneBufferGeometry(1,1),new THREE.MeshBasicMaterial({
+        transparent:true,
+        map:arrowTex,
+        side:2,
+        depthTest:false,
+    }))
+    arrow.name = 'arrow'
+    
+    
+    arrow.scale.set(-0.5,1,0.5)
+    arrow.oriScale = arrow.scale.clone()
+     
+    arrow.position.copy(player.currentPano.floorPosition)
+    arrow.position.y+=0.01
+    arrow.lookAt(player.currentPano.position)
+    
+    
+   
+    arrow.quaternion.multiplyQuaternions(rot90, arrow.quaternion)  
+     
+    
+    arrow.oriLieDownQua = arrow.quaternion.clone()
+    
+    
+    
+    arrow.visible = false
+    
+    
+    player.model.add(arrow)
+   
+    arrows.push(arrow)
+    
+}
+
+var initRoutePanos = function(model){
+    
+    model.routePanos.extend(routeArray.map(e=>model.panos.index[e]));
+    
+    model.routePanos.list.forEach((pano,i)=>{
+        if(i==model.routePanos.list.length-1)return
+        model.routePanos.neighbourMap[pano.id] || (model.routePanos.neighbourMap[pano.id] = [])
+        model.routePanos.neighbourMap[pano.id].push(model.routePanos.list[i+1])
+
+    })
+    
+    
+    console.log('initRoutePanos',model.routePanos)
+    
+}
+
+
+var arrowInfo = {
+    show:false,
+    animateDur : 5000,
+    showDur: 600,
+    minOpa: 0.2,
+    maxOpa:1,
+    
+}
+
+var updateArrowPose = function(from, to, arrow ){
+    
+    var dir = to.floorPosition.clone().clone().sub(from.floorPosition).setY(0);
+     
+    var mid = from.floorPosition.clone().add(to.floorPosition.clone()).multiplyScalar(0.5);
+    /*var diff = mid.distanceTo(player.currentPano.floorPosition)
+    
+     var minDis = 1
+    if(diff<minDis){
+        mid.add(dir.clone().multiplyScalar( Math.min(1-diff/minDis,0.2)))
+    } */
+    arrow.position.copy(mid)
+    arrow.position.y+=0.02
+    
+
+    var len = mid.distanceTo(to.floorPosition) 
+    if(len - 0.2 < arrow.oriScale.y ){//0.2 is marker size
+        arrow.scale.copy(arrow.oriScale.clone().multiplyScalar((len - 0.2)/arrow.oriScale.y ));
+    }else{ 
+        arrow.scale.copy(arrow.oriScale)
+    }
+    
+    dir.normalize();
+    var _ = (new THREE.Matrix4).lookAt(dir, new THREE.Vector3, new THREE.Vector3(0,1,0));// new Matrix().lookAt(from, aim, Vectors.UP); 前两个参数代表位置和朝向（顺序反过来应该就是反向的），第三个默认这个axis 
+    //转化为quaternion:
+    var quaternion = (new THREE.Quaternion).setFromRotationMatrix(_)
+    quaternion.multiply(arrow.oriLieDownQua)
+    
+    arrow.quaternion.copy(quaternion)
+    
+}
+
+ 
+var updateArrowOpacity = function(e){//不停更新所有arrow的透明度
+    var transition = function(a){
+        var opa = a > 0.5 ? 2-a*2 : 2*a ;
+        opa = arrowInfo.maxOpa*opa+ arrowInfo.minOpa*(1-opa)
+        
+        arrows.filter(e=>e.visible).forEach(e=>{ 
+            if(e.fadeIn){
+                e.material.opacity = opa * e.material.opacity2
+            }else{
+                e.material.opacity = opa
+            }  
+        })
+    }
+    transitions.start(transition, arrowInfo.animateDur, updateArrowOpacity, 0, easing.easeInOutCubic, "updateArrowOpacity")
+}
+
+var fadeInArrow = function(){
+    
+    transitions.cancelById('updateArrowOpacity2')
+    var arrows_ = arrows.filter(e=>e.visible && e.fadeIn)
+    if(arrows_.length == 0)return
+    
+    arrows_.forEach(e=>{  
+        e.material.opacity = 0
+    })
+    
+    var transition = function(a){
+         
+        arrows_.forEach(e=>{ 
+            e.material.opacity2 = a
+        })
+    } 
+    transitions.start(transition, arrowInfo.showDur, null, 0, easing.easeInOutCubic, "updateArrowOpacity", "updateArrowOpacity2")
+}
+
+var lastArrowPanos = []
+var updateArrow = function(currentPano){//根据当前pano更新
+    //console.log(currentPano)
+    if(currentPano === false){ //飞出
+        arrows.forEach(e=>{
+            e.visible = false
+        }) 
+        lastArrowPanos = []
+        return;
+    }
+    
+    //先获取所有需要箭头的pano
+    var minDistance = 6;//该距离内pano可见箭头
+    var dis = 0
+    var curPano = currentPano;
+    var panos = [];
+    
+    
+    var search = function(pano){//多分支搜寻
+        var neighbor = player.model.routePanos.neighbourMap[pano.id];
+        if(!neighbor )return;
+        neighbor.forEach(e=>{
+            if(panos.find(arr=>arr[0]==e))return; //不回头
+            dis = e.floorPosition.distanceTo(currentPano.floorPosition) 
+            if(dis < minDistance || panos.length<2){
+                panos.push([pano, e])
+                search(e)
+            }
+            
+        })
+        
+    }
+    
+    search(currentPano)
+    
+    /* while(1){ 
+        var neighbor = player.model.routePanos.neighbourMap[curPano.id];
+        if(!neighbor || neighbor.length == 0)break
+        neighbor = neighbor[0]
+        dis = neighbor.floorPosition.distanceTo(currentPano.floorPosition)  
+        if(dis < minDistance || panos.length<2){ 
+            panos.push([curPano, neighbor])
+            curPano = neighbor
+        }else{
+            break
+        }
+    } */
+    
+    //console.log('panos',panos)
+    //再配置arrows
+    //var newPanos = panos.filter(a=>!lastArrowPanos.find(e=>e[0]==a[0] && e[1]==a[1])) ;//新出现的点  渐变出现
+    
+    
+    var addArrowCount =  panos.length - arrows.length
+    while(addArrowCount>0){
+        addArrowCount--;
+        createArrow()
+    }
+    
+    panos.forEach((panoArr,i)=>{
+        arrows[i].visible = true 
+        var isNew = !lastArrowPanos.find(e=>e[0]==panoArr[0] && e[1]==panoArr[1])//新出现的点  渐变出现
+        arrows[i].fadeIn = !!isNew
+        
+        updateArrowPose(panoArr[0], panoArr[1], arrows[i])//更新位置
+        
+    })
+    
+    fadeInArrow()
+    
+    if(addArrowCount<0){//隐藏多余的
+        arrows.slice(addArrowCount).forEach(e=>{
+            e.visible = false
+        })
+    }
+    
+    lastArrowPanos = panos
+}
+
+
+
+
+
+
+
+
+
+
+
+
 //=================gif sprite=========
 window.animations = []
 
@@ -17712,6 +17947,10 @@ window.Modernizr = function(n, e, t) {
                 this.chunks = [],
                 this.panos = new A,
                 this.colliders = [],
+                
+                this.routePanos = new A, //add
+                
+                
                 this.loadPanosPromise = null,
                 this.loadMeshTexturesPromise = null,
                 this.auxDataPromise = null,
@@ -18053,6 +18292,20 @@ window.Modernizr = function(n, e, t) {
                         e.neighbourPanos = this.panos.getNeighbours(e) || this.panos.setNeighbour(e, e, !0))
                     }
                     .bind(this)),
+                    
+                    
+                    //add:
+                    
+                    initRoutePanos(this);
+                    
+                    
+                     
+                    //------
+                    
+                    
+                    
+                    
+                    
                     0 === this.panos.length && (O.warn("Model has no panos, turning off inside mode"),
                     this.supportedModes[c.PANORAMA] = !1),
                     $.when(this)
@@ -19254,6 +19507,7 @@ window.Modernizr = function(n, e, t) {
                         newPano: this
                     }),
                     e = this
+                    updateArrow(this)
                 }
             }(),
             n.prototype.exit = function() {
@@ -22296,6 +22550,10 @@ window.Modernizr = function(n, e, t) {
                 var l = this.is360View(t, i);
                 return !this.model.outsideAllowed() || l || a ? this.startInside(i, n, rr, o, s) : this.startOutside(e, s),
                 s.done(function(e) {
+                    updateArrow(player.currentPano)
+                    updateArrowOpacity()
+                    
+                    
                     this.emit(w.Ready, l, e, o)
                 }
                 .bind(this)),
@@ -23765,7 +24023,7 @@ window.Modernizr = function(n, e, t) {
                         this.model.floorLogos[0].visible = false;
                         this.model.floorLogos[1].visible = false;
                     }
-                                  
+                    updateArrow(false)             
                 }
                 
                 if(i == "panorama"){