xzw vor 6 Monaten
Ursprung
Commit
109cda4d51
5 geänderte Dateien mit 264 neuen und 65 gelöschten Zeilen
  1. 42 4
      css/lzb.css
  2. 42 2
      css/main.css
  3. 82 15
      edit.html
  4. 3 3
      index.html
  5. 95 41
      js/main_2020_show.js

+ 42 - 4
css/lzb.css

@@ -839,8 +839,7 @@ ul.MenuOptions li.chosen {
 .toolRight .playBox {
     border: 1px solid #5d5d5d;
     display: flex;
-    padding: 6px;
-    width: 215px;
+    padding: 6px; 
 }
 
 .toolRight .playBox>div:first-child {
@@ -892,10 +891,11 @@ ul.MenuOptions li.chosen {
     background-size: 50%;
     background-repeat:no-repeat;
     background-position:center;
+    cursor:pointer;
 }
 
 .toolRight .playBox[data-type='music']>div:first-child.playing {
-    background-image: url("../images/soundPause.png");
+    background-image: url("../images/Volume btn_off.png");
 }
 
 .toolRight .playBox>div:nth-child(2) {
@@ -1040,6 +1040,7 @@ ul.MenuOptions li.chosen {
     background-position-x: 0;
     background-repeat: no-repeat;
     background-position-y: center;
+    color: #aaa;
 }
 .toolRight .hotpoint .listItem .number{
     color:#828282;
@@ -1099,7 +1100,11 @@ ul.MenuOptions li.chosen {
     background-image: url(../images/hotlist.png);
     background-size: 45%;
 }
-
+.toolRight [name="list"] [name="prop"]{
+    padding: 10px;
+    /* border: solid 3px #fff; */
+    background: #161616;
+}
 
  
 .toolRight .secondary .content {
@@ -2188,3 +2193,36 @@ ul.MenuOptions li.chosen {
 	max-height:0;
 	overflow: hidden;
 }
+
+
+
+
+.toolRight div .boundInput input{
+    width: 86px;  text-align:center;
+}
+ 
+.toolRight div .boundInput span{
+    margin:0 10px;
+}
+
+.toolRight .axisValInput {
+    flex-direction: row;
+    align-items: center;
+    display: flex;
+    /* justify-content: right; */
+    line-height:56px;
+    /* padding-top: 1px !important; */
+}
+.toolRight .axisValInput li{ 
+    display: flex;
+    margin:0 4px; 
+}
+.toolRight .axisValInput li span{
+    margin-right: 4px !important;
+    margin-top:1px !important;
+}
+.toolRight .axisValInput li input{ 
+    margin-top:1px !important;
+    padding: 2px !important;
+    text-align:center;
+}

+ 42 - 2
css/main.css

@@ -3369,7 +3369,7 @@ a.hasHover:hover, a:active {
 }
 
 .ui-icon {
-    font-size: 26px;
+    font-size: 22px;
 }
 
 .left .ui-icon.wide {
@@ -7421,4 +7421,44 @@ a.hasHover.tag-link:hover {
     opacity: 1;
     margin-top: 0;
   }
-} 
+} 
+
+
+
+#alert{
+    background:#262729;
+    font-size:14px;
+    position:fixed;
+    top: 14%;
+    padding: 17px;
+    padding-right:40px;
+    border-radius:10px;
+    left:50%;
+    opacity:0.9;
+    transform: translate(-50%, 0);
+    transition: top  0.2s, transform  0.2s, opacity 0.4s;
+    letter-spacing:1px;
+    z-index:9999;
+}
+
+#alert.closed{
+    top: 0;
+    opacity:0; 
+    transform: translate(-50%, -100%);
+    
+}
+
+#alert .close{
+    width: 20px;
+    height: 22px;
+    right:10px;
+    top:10px;
+    position: absolute;
+    background-size: 52%;
+    background-image: url("../images/phone_step_01.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+#alert .close:hover{
+    cursor:pointer;
+}

+ 82 - 15
edit.html

@@ -956,7 +956,7 @@
                                     自适应热点大小 
                                 </label>
                             </ul>
-                            <label class="remark " >仅对贴图样式为“闪烁”的热点生效 </label>
+                            <label class="remark " >在每个热点大小基础上的进一步调节。仅对贴图样式为“闪烁”的非模型热点生效 </label>
                              
                         </li>
                         <li id="hotVisible">
@@ -1090,10 +1090,15 @@
                                         <li class="" index="scale" data-lang="">缩放</li> 
                                         <li class="" index="rotate" data-lang="">旋转</li>
                                     </ul>
+                                    <ul class='axisValInput'> 
+                                        <li><span> x </span><input></input> </li> 
+                                        <li><span> y </span><input></input> </li>  
+                                        <li><span> z </span><input></input> </li>  
+                                    </ul>
                                     <div class="buttons">
                                         <button class="innerBtn cancel" name="setSpace">切换为世界坐标方向</button>
                                         <button class="innerBtn" name="useSuitableRatio">自适应缩放比例</button> 
-                                        <button class="innerBtn" name="resetRot" style='    width: 100px;'>重置旋转</button>
+                                        <!-- <button class="innerBtn" name="resetRot" style='    width: 100px;'>水平放置</button> -->
                                     </div>
                                       
                                    
@@ -1139,7 +1144,7 @@
                                                 <button class="innerBtn cancel" style="font-size: 10px;">应用到所有</button>
                                             </div>
                                         </div> 
-                                        <textarea placeholder="<=300字" class="editText" maxlength="300" style="min-height:100px"></textarea>
+                                        <textarea placeholder="<=1000字" class="editText" maxlength="1000" style="min-height:100px"></textarea>
                                  
                                         
                                         <div class="upload">
@@ -1496,7 +1501,26 @@
                                 <li class="" index="3">3</li>
                                 <li class="" index="4">4</li>
                             </ul>
+                             
+                            <div class="itemTitle" name='angleShift'>
+                                <span>角度偏移</span>
+                                <input type="text" placeholder="0到90" style='width: 63px; margin-left: 30px;'>
+                            </div>
+                            
+                            
+                        </li>
+                        <li data-name="upDownAngleLimit">
+                            <div class="itemTitle">
+                                <span>俯仰角限制</span>
+                            </div>
+                            <ul class="boundInput"> 
+                                <input type="text" placeholder="-90到0">
+                                <span> — </span>
+                                <input type="text" placeholder="0到90">
+                            </ul> 
                         </li>
+                        
+                         
                         <li data-name="other">
                             <div class="itemTitle">
                                 <span>其他设置</span>
@@ -1576,7 +1600,7 @@
 
                 <div class="music content hide">
                     <ul>
-                        <li name='audio' class=" mediaUpload">
+                        <li name='background' class=" mediaUpload">
                             <div class="itemTitle">
                                 <span>背景音乐</span>
                                 <div class="buttons">
@@ -1592,7 +1616,40 @@
                                 </div>
                             </div>
                         </li>
-                    </ul>
+                        
+                        <li name='list'>   
+                            <div class="buttons bigger">
+                                <button class="innerBtn">新增区域音频</button> 
+                            </div>
+                          <ul>
+                           
+                            <li name='prop' class = 'hide'>
+                                  <ul>  
+                                    <li name='title'> 
+                                        <input placeholder="输入区域名称 <30字" minlength="1" maxlength="30"  class="right input" type="text"  spellcheck="false" >
+                                    </li> 
+                                    <li class="audio mediaUpload"> 
+                                        <div class="itemTitle   secondFontSize">
+                                            <span>添加音频(<8M)</span>
+                                            <div class="buttons">
+                                                <input type="file"  accept="audio/*">
+                                                <button class="innerBtn submit">上传</button>
+                                            </div>
+                                        </div>
+                                        <div class="playBox hide" data-type='music'>
+                                            <div><a target="_blank"></a></div>
+                                            <div>
+                                                <span class="title">area background</span>
+                                                <span class="delete">删除</span>
+                                            </div>
+                                        </div>
+                                    </li> 
+                                    <label class='remark'>操作:点击漫游点以添加入该区域</label>                                    
+                                  </ul> 
+                              </li> 
+                          </ul> 
+                      </li>
+                    </ul> 
                 </div>
 
 
@@ -1616,6 +1673,11 @@
                                     启用瞬间过渡
                                 </label>
                             </ul> 
+                            <ul id="playTourNearBy" class="switch clearfix hotStyle-item colorWrap">
+                                <label><input class="mui-switch mui-switch-animbg" type="checkbox">
+                                    从就近片段开始
+                                </label>
+                            </ul> 
                             <div class="itemTitle">
                                 <span>瞬间过渡速度</span>
                             </div>
@@ -1882,23 +1944,20 @@
                     <ul > 
                         <li class="addBtn"> 
                             <div class="buttons bigger">
-                                <button class="innerBtn" data-type="shine">添加标签</button> 
+                                <button class="innerBtn">添加标签</button> 
                             </div>   
                         </li>
                         <li name='list'> 
                             <ul>
                                 <li name='prop' class = 'hide'>
                                     <ul> 
-                                        <li name='title'>
-                                            <!-- <div class="itemTitle" data-size="30">
-                                                <span>标题</span>
-                                            </div> -->
+                                        <li name='title'> 
                                             <input spellcheck="false" class="right input" type="text" minlength="1" maxlength="30" placeholder="输入标题 <30字">
                                         </li>
-                                        <!-- <li name='delete'>
-                                            <div class="buttons">
-                                                <button class="innerBtn cancel" >删除</button> 
-                                            </div>   
+                                        <!-- <li class="editCheckbox">
+                                            <input name="routeOpaShine" type="checkbox" value="routeOpaShine" id="routeOpaShine">
+                                            <label for="routeOpaShine"></label>
+                                            <label for="routeOpaShine">点击后是否进入漫游点</label>
                                         </li> -->
                                     </ul> 
                                 </li> 
@@ -1978,9 +2037,17 @@
         if (!token) {
            window.location.href = "http://192.168.0.44:8101/bigscene/#/"
         }
+        
+        setTimeout(()=>{
+        
+            var objLoader = new THREE.OBJLoader()
+            objLoader.load('test.usdz', (object)=>{
+                        
+            })
+        },2000)
+        
         */
 
-
     </script>
 
     <script src="js/lib/jquery-2.1.1.min.js" class="build keep"></script>

+ 3 - 3
index.html

@@ -791,9 +791,9 @@
      
         var changeLog = ()=>{
 
-            let logLevel = 1
+            let logLevel = 1//= 2
         
-           if((number == "TEST" || browser.valueFromHash('test')) && browser.isMobile()){
+           if((number == "TEST" || browser.urlHasValue('test')) && browser.isMobile()){
                 var textarea = document.createElement('textarea');
                   textarea.id = "consoleLog";
 
@@ -861,7 +861,7 @@
             scriptdom.setAttribute('type','text/javascript')
             scriptdom.src = 'js/lib/flv.min.js'
          }*/
-          
+         
     
     </script>
 </body>

+ 95 - 41
js/main_2020_show.js

@@ -4956,7 +4956,7 @@ window.Modernizr = function(n, e, t) {
             
             
             
-            n.prototype.findNearestItem = function(endToStart=true){//找到离currentPano最近的导览
+            n.prototype.findNearestItem = function(endToStart=true, searchEvery){//找到离currentPano最近的导览
                 /* if(this.atDestinationPano(this.player.currentPano)){//在终点直接从头。但有的场景可能不希望如此,就想跳到所属的展区开始。
                     return [0,0]   //2023.7.7发现在点击item后播放会从头开始
                 } */
@@ -4971,29 +4971,37 @@ window.Modernizr = function(n, e, t) {
                         if(dis<result.dis){
                             result.item = item, result.dis = dis
                         }else if(dis == result.dis){//如果两个位置相同,优先播放在导览条上离激活的最近的那段导览 
-                            /* if(this.itemCompare(item,  this.currentItem, 'equal')){
+                            
+                            /* if(this.itemCompare(item,  this.currentItem, 'equal')){//优先用当前的
                                 result.item = item, result.dis = dis
-                            } */ 
-                            if(this.currentItem && Math.abs(item[0]-this.currentItem[0]) < Math.abs(result.item[0]-this.currentItem[0])){
+                            }else if(this.currentItem && Math.abs(item[0]-this.currentItem[0]) < Math.abs(result.item[0]-this.currentItem[0])){
                                 result.item = item, result.dis = dis
-                            }  
+                            } */ 
+                            if(this.currentItem){
+                                let dis1 = [Math.abs(item[0] - this.currentItem[0]), Math.abs(item[1] - this.currentItem[1])] //当前差距
+                                let dis2 = [Math.abs(result.item[0] - this.currentItem[0]), Math.abs(result.item[1] - this.currentItem[1])]
+                                if( this.itemCompare(dis1, dis2, 'less')){ 
+                                    result.item = item, result.dis = dis
+                                }
+                            }
                         }
                     } 
                 }
                 this.model.heroLocations.forEach((e,i)=>{
                     if(e.heroLocations){
-                       /* e.heroLocations.forEach((a,j)=>{
-                           compare(a, [i,j])
-                       }) */
-                       var location = e.heroLocations.find(e=>e.panoId != void 0)
-                       location && compare(location, [i,0]) //跳到此区域开头
-                       
+                       if(searchEvery){
+                            e.heroLocations.forEach((a,j)=>{
+                                compare(a, [i,j])
+                            })
+                       }else{
+                            var location = e.heroLocations.find(e=>e.panoId != void 0)
+                            location && compare(location, [i,0]) //跳到此区域开头
+                       }  
                     }else{
                        compare(e, [i,0])
                     }  
                     
                 })
-                
                  
                 
                 if(endToStart && this.atEndOfTour(result.item)){ //如果是最后一个点,直接跳到开头,否则导览开始就在终点的话不会从头开始
@@ -22106,7 +22114,7 @@ window.Modernizr = function(n, e, t) {
                 this.updateModel()
                 
                 
-                //this.guider2 = new PanTransGuide(this)
+                this.guider2 = new PanTransGuide(this)
                 
                 
             }
@@ -23554,7 +23562,7 @@ window.Modernizr = function(n, e, t) {
                 if (this.updateLastView(),
                 this.mode !== u.PANORAMA) {
                     var m;
-                    void this.flyToNewMode({
+                    return void this.flyToNewMode({
                         mode: u.PANORAMA,
                         pano: i,
                         duration: o,
@@ -59521,7 +59529,6 @@ window.Modernizr = function(n, e, t) {
 }, {}, [116]);
 
 
-
 class PanTransGuide{    
     constructor(player){
         this.player = player
@@ -59534,12 +59541,23 @@ class PanTransGuide{
         this.nodes = []
         let path = this.player.path
         let last
-        this.player.model.heroLocations.forEach((e,i)=>{
-             
-            if(i>0){  
-
-               if(e.cameraMode != 'panorama')return
-          
+        
+        let index = this.player.model.heroLocations.findIndex(e=>e.name == '沉浸看展') //先去掉之前旧的数据
+        if(index>-1){
+            let locations = this.player.model.heroLocations[index].heroLocations
+            this.player.model.heroLocations.splice(index,1)
+        }
+        
+        let get = (e, originItem)=>{  
+            if(e.cameraMode != 'panorama'){ 
+                e.originItem = originItem
+                this.nodes.push(e) 
+                return last = null //断连
+            }
+                
+              
+            if(last){   
+                e.visited = true
                 path.setWarpDestination(e)
                 path.setWarpDestPano()
                 let A = path.getHeroPano(last), 
@@ -59548,12 +59566,13 @@ class PanTransGuide{
                     path.nodes = [A.id,B.id];//直接加入
                 }else{ 
                     path.nodes = path.findShortestPath(A, B)
-                    
                     if(path.nodes == null){//两个点之间不相通
                         console.log('两个点之间不相通',A.id,B.id)
                         path.nodes = [A.id,B.id];//直接加入
                     }
-                }   
+                }
+                 
+                
                 let wholeDis = 0, disSections = []
                 path.nodes.forEach((cur,i)=>{
                     if(i==0)return
@@ -59570,7 +59589,7 @@ class PanTransGuide{
                 path.nodes.forEach((panoId,j)=>{ 
                     if(j == 0){
                         if(path.nodes.length == 1)return this.nodes.push({panoId,quaternion:quaEnd})//原地旋转
-                        if(i > 0)return //和上一段末尾重复
+                        if(!last) return //和上一段末尾重复
                         return this.nodes.push({panoId,quaternion:quaStart})
                     }
                     let r = disSections[j-1] / wholeDis
@@ -59578,21 +59597,33 @@ class PanTransGuide{
                     lerp.quaternion(quaternion, quaEnd)(r) 
                     this.nodes.push({panoId, quaternion})
                 })
-            }
-            
+            } 
             last = e
-        })
-          
-        //path.setWarpDestinationByHeroIndex()
+           
+        }
+        
+        this.player.model.heroLocations.forEach((e,i)=>{ 
+            if(e.heroLocations){
+               e.heroLocations.forEach((a,j)=> get(a, [i,j])) 
+            }else{
+               get(e,[i,0])
+            }  
+        })    
+        
+        //补 因为last前一个可能不是panorama,导致last没加进nodes
+        if(last && !last.visited){
+            get(last)   
+        }
         
-         
     }
     
     go(axis){
         if(this.player.flying)return
         let aimNode
         let cur = this.nodes[this.currentIndex]
-        if(cur.panoId != this.player.currentPano.id){//已走动
+         
+        
+        if(cur.panoId != this.player.currentPano.id && player.mode == 'panorama'){//已走动){//已走动
             let curs = this.nodes.filter(e=>e.panoId == this.player.currentPano)   
             curs.sort((a,b)=>{      //如果有多个,找到和currentIndex最接近的,可能是刚走过的
                 let indexA = this.nodes.indexOf(a)
@@ -59602,28 +59633,40 @@ class PanTransGuide{
             cur = curs[0]
             if(!cur){//不在道上 . 找离当前位置最近的node
                 let disMap = new Map
-                this.nodes.forEach(e=>{
+                let nodes_ = this.nodes.filter(e=>!e.originItem)
+                 
+                nodes_.forEach(e=>{
                     disMap.set(e,player.currentPano.position.distanceToSquared(this.player.model.panos.get(e.panoId).position))
                 })
-                let sorted = this.nodes.slice().sort((a,b)=>{     
+                let sorted = nodes_.slice().sort((a,b)=>{     
                     return disMap.get(a) - disMap.get(b)
                 })
               
                 this.currentIndex = this.nodes.indexOf(sorted[0])//next
-                if(axis == 'prev'){
+                if(axis == -1){
                     this.moveIndex(-1) 
                 }
                 aimNode = this.nodes[this.currentIndex]
             }
         }
+        let lastIndex = this.currentIndex
         if(!aimNode){
-            this.moveIndex(axis == 'prev' ? -1 : 1)
-            aimNode = this.nodes[this.currentIndex]
+            this.moveIndex(axis)
+            aimNode = this.nodes[this.currentIndex] 
+        }
+        
+        if(aimNode.originItem){//要飞出的,直接用导览飞 
+            player.director.setDestinationItem(aimNode.originItem) 
+            player.director.goToDestination() 
+            return
         }
         
-        let dis = this.player.model.panos.get(aimNode.panoId).position.distanceTo(this.player.position)
-        let moveStyle = dis < 10 ? "flyToPano" : "blackToPano"
-        this.player[moveStyle]({pano: this.player.model.panos.get(aimNode.panoId),quaternion:aimNode.quaternion})
+        //let dis = this.player.model.panos.get(aimNode.panoId).position.distanceTo(this.player.position)
+        let moveStyle = (lastIndex == 0 && axis == -1 || this.currentIndex == 0 && axis != -1) ? "blackToPano" : "flyToPano" 
+        this.player[moveStyle]({pano: this.player.model.panos.get(aimNode.panoId), quaternion:aimNode.quaternion}, ()=>{
+            //更新导览进度条
+            player.director.setDestinationItem( player.director.findNearestItem(true,true) )
+        })
        
     }
     
@@ -59633,13 +59676,24 @@ class PanTransGuide{
         this.currentIndex %= this.nodes.length
         return this.currentIndex
     }
-    
-  
 }
 
 
 
 
+//2025新的需求  沉浸看展直接使用导览
+window.tourPlayCtl = { 
+    go(axis){
+        player.guider2.go(axis)
+        
+    }
+}
+
+
+
+
+
+
 
 /*
 function getWebXRManager(){