优化box视频

index.html

@@ -43,15 +43,15 @@
     </script>
     <style>
         #consoleLog{ 
-          width: 120px;
-          height: 153px;
+          width: 200px;
+          height: 250px;
           position: absolute;
           right: 0px;
-          bottom: 160px;
+          bottom: 100px;
           z-index: 999999;
           color: black;
           opacity: 0.9;
-            font-size: 12px;
+            font-size: 10px;
         }
     
     </style>
@@ -818,8 +818,8 @@
                */
                 }
                 
-                
-             if((number == "TEST" || browser.valueFromHash('TEST')) && browser.isMobile()){
+             let logLevel = 1  
+             if((number == "TEST" || browser.valueFromHash('test')) && browser.isMobile()){
                 var textarea = document.createElement('textarea');
                   textarea.id = "consoleLog";
 
@@ -827,16 +827,22 @@
                   var list = ["log", "error", "warn", "debug", "info", "time", "timeEnd"]
                   var exchange = function (o) {
                     console["old" + o] = console[o];
-                    console[o] = function (str) {
-                    
-                    
-                        var args =   Array.from(arguments)
+                    console[o] = function (str ) {
                         console["old" + o].apply(this, arguments)
+                        if(logLevel){
+                            if(o != 'error' && logLevel != str.level){
+                                return  
+                            }
+                            if(str.str) str = str.str
+                        }
+                        
+                        var args = Array.from(arguments)
+                       
                         var str = ''
                         args.forEach(a=>{
                             str += a + ','
                         })
-                         textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
+                        textarea.innerHTML = str + "\n\n" + textarea.innerHTML;
                     
                       /*console["old" + o](str);
                       var t = document.getElementById("consoleLog").innerHTML;

js/Hot.js

@@ -10,8 +10,8 @@ g_currentHot = null
 
 const playVideoWhenFlyOut = false
 //同时可播放的最大个数:
-const playVideoMax = window.isEdit ? 4  :   browser.isMobile() ? 2 : 3;   
-const playAniMax = window.isEdit ? 8 :   browser.isMobile() ? 3 : 6;
+const playVideoMax = window.isEdit ? 3  :   browser.isMobile() ? 1 : 2;   
+const playAniMax = window.isEdit ? 6 :   browser.isMobile() ? 3 : 5;
 
 
 
@@ -325,7 +325,7 @@ window.initHot = function(model){
                     video = media
                 }else{
                     if(!this.info.texSrc)return
-                    var video = $(`<video  controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"  preload="meta" ></video>`)[0]
+                    var video = $(`<video  controls="controls" loop   x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"  preload="meta" ></video>`)[0]
                     if(window.isEdit) video.src = manage.dealURL(this.info.texSrc);  //注意,src赋值就会自动加载， preload="meta" 只加载元数据，提高加载速度，否则一开始卡 
                     video.name = this.info.fileName
                 } 
@@ -342,26 +342,36 @@ window.initHot = function(model){
                   
                 video.oncanplaythrough = (e)=> {
                     if(this.texMedia == video){ 
-                        //console.log('oncanplaythrough',e,this.sid)
+                        /* if(video.paused) */console.log({str:'oncanplaythrough '+this.sid, level:1})
                         //this.material_.map.needsUpdate = !0   //当初为何加这句？
-                        //this.update(player) 
-                         
+                        //this.update(player)  
                     } 
                 }
-                 
-                 
+                /* video.onloadstart = (e)=> {
+                    console.log({str:'onloadstart '+this.sid, level:1})
+                }
+                video.onloadedmetadata = (e)=> {
+                    console.log({str:'onloadedmetadata '+this.sid, level:1})
+                } 
+                video.onloadeddata = (e)=> {
+                    console.log({str:'onloadeddata '+this.sid, level:1})
+                }
+                video.oncanplay = (e)=> {
+                    console.log({str:'oncanplay '+this.sid, level:1})
+                } */
+                
+                
                 
                 video.volume = 0
                 video.muted = true
                 video.currentTime = 0
                 
                 
-                if(!window.isEdit) this.material_.opacity = 0.1;
+                if(!window.isEdit) this.material_.opacity = 0.3;
                 this.material_.map = new THREE.VideoTexture(video) 
                 this.material_.map.wrapS = this.material_.map.wrapT = THREE.ClampToEdgeWrapping;
                 
-                this.material_.map.generateMipmaps = true;
-                
+                this.material_.map.generateMipmaps = true; 
             }else if(texType == 'photo'){
                 
                 if(media){
@@ -693,9 +703,19 @@ window.initHot = function(model){
             
              
             let maxCount = browser.isMobile() ? 2000 : 5000
+            
+            let possiblePanos = model.panos.list
+            if(this.plane){//目前都是单面，所以只要可以看到的一面的热点
+                let dir1 = new THREE.Vector3(0,0,-1).applyQuaternion(this.quaternion).negate()
+                possiblePanos = possiblePanos.filter(pano=>{ 
+                    let dir2 = new THREE.Vector3().subVectors(pano.position, this.position).normalize();
+                    return dir1.dot(dir2)>0
+                })
+            }
+            
             let c = model.panos.list.length * model.colliders.length
             if(window.isEdit ||  c < maxCount){  //编辑页面保险起见还是全部算完后才可浏览，就能保证保存全部的visiblePano
-                this.info.visiblePanos = common.getVisiblePano(customPositions,  model.panos.list, {
+                this.info.visiblePanos = common.getVisiblePano(customPositions, possiblePanos , {
                     model: model.colliders , posAtPanos  
                 })  
                 
@@ -703,17 +723,17 @@ window.initHot = function(model){
                 let start = 0
                 let interval = setInterval(()=>{
                     let end = start + Hot.visiPanosCountSlice; 
-                    end = Math.min(end, model.panos.list.length)
+                    end = Math.min(end, possiblePanos.length)
                     let i = start
                     start = end 
-                    let panos = model.panos.list.slice(i,end)
+                    let panos = possiblePanos.slice(i,end)
                     
                     
                     this.info.visiblePanos = this.info.visiblePanos.concat( common.getVisiblePano(customPositions,  panos, {
                         model: model.colliders , posAtPanos  
                     }));
                     
-                    if(end>=model.panos.list.length){
+                    if(end>=possiblePanos.length){
                         //console.log(window.hotsi ?(++window.hotsi): (window.hotsi = 1))
                         clearInterval(interval)
                     }
@@ -949,32 +969,38 @@ window.initHot = function(model){
         }
         
         loadVideo(video){
-            if(video.src)return 
-            video.src = manage.dealURL(this.info.texSrc); 
+            if(video.src_)return 
+            video.src = video.src_ = manage.dealURL(this.info.texSrc); 
         }
-
+        
 
         videoControl(state){
             if(this.texType != "video" || !this.material_.map)return
-            var video = this.material_.map.image
+            var video = this.texMedia
             this.shouldPlay = state
             
+            
+            
             if(!state || state == 'stop'){
                 if(!video.paused){
                     video.pause()
-                    console.log("pause " + this.sid)
+                    console.log({str: "paused " + this.sid, level:1})
                 }
-               
+                /* video.lastCurTime = state == 'stop' ? 0 : video.currentTime //记录
+                video.src = video.src_ = '' */
+                
                 if(state == 'stop'){
                     video.currentTime = 0; 
                 }  
             }else if(state){
-                if(video.paused){
+                if(/* !isVideoPlayed(video) */  video.paused  ){
+                    console.log({str: 'videoControl play ' +", "+ this.sid,  level:1})
                     this.loadVideo(video)
                     video.play()
+                    //video.currentTime = video.lastCurTime || 0
                     this.changeOpaWhenPlay(video)
                      
-                    console.log("play " + this.sid)                    
+                    if(isVideoPlayed(video))console.log({str:"played " + this.sid + video.duration ,level:1})              
                 }                    
                   
             }
@@ -990,10 +1016,11 @@ window.initHot = function(model){
             const minPlayedTime = Math.min(video.duration/10, 0.1); //到这个时间说明加载成功
             if(!video.hasInitedOpacity){
                 setTimeout(e=>{ 
+                    //console.log('trychangeOpa ',this.sid,video.currentTime)
                     if(video.currentTime>minPlayedTime){
                         this.material_.opacity = 1
                         video.hasInitedOpacity = true
-                        console.log('changeOpaWhenPlay',this.sid)
+                        //console.log('changeOpaWhenPlay',this.sid)
                     }else{
                         if(!video.paused){//再次尝试
                             return setTimeout(()=>{
@@ -1745,15 +1772,16 @@ window.initHot = function(model){
                 /* if(hot.texType == 'video' && hot.shouldPlay){
                     console.log(1)
                 } */ 
-                if(!hot.clickToPlayInited && hot.texType == 'video' && hot.material_.map.image.paused && hot.shouldPlay){
+                if(!hot.clickToPlayInited && hot.texType == 'video' && !isVideoPlayed(hot.texMedia) && hot.shouldPlay){
                     //hot.update(player)
-                    //console.log('clickToPlayInited111')
+                    console.log({str:'try mobileAutoPlay '+ hot.sid, level:1})
                     hot.videoControl(true)
                     
-                    if(!hot.material_.map.image.paused){
-                        console.log('clickToPlayInited')
-                        hot.changeOpaWhenPlay(video)
+                    if(isVideoPlayed(hot.texMedia)){
+                        console.log({str:'clickToPlayInited '+ hot.sid, level:1})
                         hot.clickToPlayInited = true 
+                        hot.changeOpaWhenPlay(video)
+                        
                     } 
                 }  
             }) 
@@ -1796,7 +1824,7 @@ window.initHot = function(model){
                 if(list.length < max){
                     list.forEach(hot=>type == 'video' ? hot.videoControl(true) : GifTexDeal.start(hot.animation))
                 }else{
-                    let r = common.sortByScore(list,[],[(hot)=>{
+                    /* let r = common.sortByScore(list,[],[(hot)=>{
                         let score = 0
                         var cornerPointInfo = hot.getCornerPoint(); //仅支持漫游模式
                         let pos2dSum = 0    //越接近0越接近屏幕中心
@@ -1806,13 +1834,36 @@ window.initHot = function(model){
                                 pos2dSum += Math.abs(pos2d.vector.x);
                                 pos2dSum += Math.abs(pos2d.vector.y);
                             }else{
-                                pos2dSum += 2-Math.abs(pos2d.vector.x); //感觉决定背面的只有x，所以忽略y？  
+                                pos2dSum += 30 - THREE.Math.clamp(Math.abs(pos2d.vector.x), 0, 5); //感觉决定背面的只有x，所以忽略y？  //这里无法确定加多少合适，是根据视频大小来的
                             }  
                         }
-                        let area = cornerPointInfo.diffLon * cornerPointInfo.diffLat   //占据面积
-                        score = -pos2dSum * (type == 'video' ? 100 : 10) + area  //gif的面积权重增加些，也就是不一定要靠近中心。因为一般而言gif比较小，起指示作用，即使散落在四角也尽量闪烁；而视频要观看的话一般会凑近居于中心
+                        
+                        //
+                        
+                        let area =   cornerPointInfo.diffLon * cornerPointInfo.diffLat * ( 8 / pos2dSum  )  //占据面积
+                        //score = -pos2dSum * (type == 'video' ? 100 : 10) + area  //gif的面积权重增加些，也就是不一定要靠近中心。因为一般而言gif比较小，起指示作用，即使散落在四角也尽量闪烁；而视频要观看的话一般会凑近居于中心
+                         
+                        score = area
+                        return score
+                    }]) */ 
+                    
+                    
+                    let playerDir = player.getDirection()
+                    let r = common.sortByScore(list,[],[(hot)=>{    //方向因素
+                        var cornerPointInfo = hot.getCornerPoint(); 
+                        let dir = new THREE.Vector3().subVectors(hot.position, player.position).normalize()
+                       
+                        score = dir.dot(playerDir) * Math.pow(cornerPointInfo.diffLat,0.5)// pow降低高度的权重，因为宽度更重要些。之所以两个函数都乘以diffLat，也是为了防止在两个item的分数相同diffLon不同时，diffLat增长相同倍数却能造成分数差异的情况
+                         
                         return score
-                    }])
+                    },
+                    (hot)=>{//面积因素
+                        var cornerPointInfo = hot.getCornerPoint(); //仅支持漫游模式
+                        let area = cornerPointInfo.diffLon * Math.pow(cornerPointInfo.diffLat,0.5) / 1000 //占据面积
+                        return area
+                    } ])
+                    //getCornerPoint仅支持漫游模式   Lat高度（纬度）.
+                    
                     //console.log(r)
                     r && r.forEach((e,j)=>{
                         let hot = e.item
@@ -1837,7 +1888,9 @@ window.initHot = function(model){
     
 }
 
-
+function isVideoPlayed(video){
+    return !video.paused && !isNaN(video.duration) //注意，有的手机首次play时会立即paused为false，但其实没加载好， duration为NAN      
+}
 
 /* 
 
@@ -1861,5 +1914,7 @@ window.initHot = function(model){
     
     
     有遇到某张图在ios里显示不出，但在ps重新输出后就可以。这张图的dpi高达500，不知道是否与此有关。
+    遇到过ios14.8.1、14.7.1 无法播放webm(来自1050)。 onloadedmetadata失败
+    
     
-     */
+*/

js/edit.js

@@ -3645,7 +3645,7 @@ Hotpoint.prototype.saveHot = function() {
 
 
 
-Hotpoint.prototype.ifNeedResetVisi = function(hot){//修改过贴图或位置，导致这几个数值改变，就要重新计算可见性（会覆盖用户设置）
+Hotpoint.prototype.ifNeedResetVisi = function(hot){//修改过贴图或位置或模型，导致这几个数值改变，就要重新计算可见性（会覆盖用户设置）
     var need = !ifSame({
         hasBox: hot.tempInfo.hasBox,
         position: hot.tempInfo.position,

js/main_2020_show.js

@@ -16061,7 +16061,7 @@ window.Modernizr = function(n, e, t) {
                 var g = this.model.panos.sortByScore(i, o);
                 if (a.tags.navigate.lineOfSight) {
                     for (var m = 0; m < g.length; m++) {
-                        var v = g[m].pano
+                        var v = g[m].item
                           , A = v.position.distanceTo(l);
                         if (!a.tags.visibility.anyDistance && A > a.tags.visibility.visibleDistance)
                             return null;
@@ -16072,7 +16072,7 @@ window.Modernizr = function(n, e, t) {
                     }
                     return null
                 }
-                return g.length > 0 && g[0].pano
+                return g.length > 0 && g[0].item
             }
             ,
             n.prototype.examine = function(e) {
@@ -22055,7 +22055,8 @@ window.Modernizr = function(n, e, t) {
                 }
                 //add
                 if (this.intersectHot) this.intersectHot.setHoverState(false)
-                        this.intersectHot = null
+                this.intersectHot = null
+                Hot.mobileAutoPlay(this)    
             }
             ,
             n.prototype.onPointerDown = function(e) {
@@ -22136,6 +22137,7 @@ window.Modernizr = function(n, e, t) {
             n.prototype.handleControlScroll = function(e) {
                 f.zoom.enabled ? (e > 0 ? e = 1 + this.scrollZoomSpeed : e < 0 && (e = 1 - this.scrollZoomSpeed),
                 0 !== e && this.handleScrollPinchZoom(e)) : this.flyLocalDirection(new r.Vector3(0,0,-e).normalize())
+             
             }
             ,
             n.prototype.handleInputStart = function(e, t, i) {
@@ -22451,7 +22453,7 @@ window.Modernizr = function(n, e, t) {
                     var fov = B.getHFOVFromVFOV(f.insideFOV, n.aspect, 1); //获得在当前窗口的横向的fov
                     var distance = Math.abs(boxSize.x) / 2 / Math.tan(THREE.Math.degToRad(fov / 2))//根据上面获得的参数得到target到相机的距离
                     
-                    console.log(boxSize.x,distance, boxSize.length() / 2)
+                    //console.log(boxSize.x,distance, boxSize.length() / 2)
                     
                     distance +=  boxSize.length() / 2   //由于此时模型从中心向相机的部分由于近大远小仍超出屏幕，所以将target放在靠近模型靠近相机的这一端，故而再加上box的对角线长度的一半, 虽然本该加上Math.sqrt(boxSize.z*boxSize.z +boxSize.y+boxSize.y)/2，但是这样模型显得比较满
                      
@@ -29151,7 +29153,7 @@ window.Modernizr = function(n, e, t) {
                   , c = t.sortByScore(s, l);
                 if (c)
                     for (var h = 0; h < c.length && h < a; h++) {
-                        var u = c[h].pano;
+                        var u = c[h].item;
                         i.push(u)
                     }
                 return i
@@ -30302,8 +30304,8 @@ window.Modernizr = function(n, e, t) {
                 }),
                 i[0])
             }
-            ,
-            n.prototype.sortByScore = function(e, t) {
+             
+            /* n.prototype.sortByScore = function(e, t) {
                 var i = o.filterAll(this.list, e);
                 return 0 === i.length ? null : i = i.map(function(e) {
                     return {
@@ -30315,7 +30317,11 @@ window.Modernizr = function(n, e, t) {
                 }).sort(function(e, t) {
                     return t.score - e.score;
                 })
-            }
+            } */
+            ,
+            n.prototype.sortByScore = function( request, rank){
+                return common.sortByScore(this.list, request, rank)
+            } 
             ,
             n.prototype.lowestByScore = function(e, t, i) {
                 return this.findRankedByScore(0, e, t, i)
@@ -30327,8 +30333,8 @@ window.Modernizr = function(n, e, t) {
                 e || (e = 0);
                 var r = this.sortByScore(t, i);
                 return !r || 0 === r.length || e >= r.length ? null : (n && (n.candidates = r,
-                n.pano = r[e].pano),
-                r[e].pano)
+                n.pano = r[e].item),
+                r[e].item)
             }
             ,
             n.prototype.showPanoScores = function(e) {
@@ -50387,7 +50393,7 @@ window.Modernizr = function(n, e, t) {
             function h() {
                 requestAnimationFrame(h) 
                 if( !e.paused  && e.readyState === e.HAVE_ENOUGH_DATA){//改 add  !e.paused 
-                    u.needsUpdate = !0
+                    u.needsUpdate = !0 
                 }
             }
             n.Texture.call(this, e, t, i, r, o, a, s, l, c),

js/manage.js

@@ -86,7 +86,7 @@ var settings = {
     flyTime:750,  */
     tourRotTime:2,  //默认停留2秒
     //dontExamHot:true,  
-    hotFastTran:true,
+    hotFastTran:false,
     transparentBg: false,
     bgImg:  null,
      
@@ -166,7 +166,7 @@ var dealMap = (map, o={} )=>{
         if(!map.image || !THREE.Math.isPowerOfTwo(map.image.width ) || !THREE.Math.isPowerOfTwo(map.image.height )){
             map.wrapS = map.wrapT = THREE.ClampToEdgeWrapping;
             map.minFilter = THREE.LinearFilter; 
-            map.generateMipmaps = true;
+            //map.generateMipmaps = true;
         } 
     }        
     if(!browser.isMobile()) map.anisotropy = 3