kkk

pano3.html

@@ -6,10 +6,12 @@
     <title>vr house</title>
     <!-- <script src="./three.module.js"></script> -->
     <!--    <script src="./js/controls/OrbitControls.js"></script> -->
-    <script src="./js/tvSysBtnBind.v2.1.js"></script>
+    <!-- <script src="./js/tvSysBtnBind.v2.1.js"></script> -->
     <!--   <script src="./js/loaders/MTLLoader.js"></script> -->
     <!--   <script src="js/loaders/collada/AnimationHandler.js"></script> -->
     <meta charset="utf-8">
+
+
     <style>
         body {
             /* set margin to 0 and overflow to hidden, to go fullscreen */
@@ -44,15 +46,12 @@
             top:32px; */
             right:15px;
         }
-
         #cam{
             position: absolute;
             /* z-index: 12; */
             /* top:32px; */
             right:15px;
             /* transform: rotate(180deg); */
-
-            
         }
 
         #redPoints{
@@ -70,37 +69,77 @@
             height: 8px;
         }
 
-        .controls{
-            display: flex;
-            z-index: 10;
-            position: fixed;
-            bottom:30px;
-            right:100px;
-            flex-direction: column;
-            align-items: center;
+        #tip{
+            position: absolute;
+            right:15px;
+            bottom: 15px;
+            color: gray;
+            display: none;
         }
 
-        .up,.down,.left,.right,.ok{
-            display: flex;
+        #menu{
+            position: absolute;
+            z-index: 9;
+            display: none;
+            bottom: 30px;
+            width: 100%; 
+            overflow: auto;
+            background-color: #eaeee3;
+        }
+
+        #menu .pano{
+            position: relative;
+            margin: 10px;
             cursor: pointer;
-            background-color: steelblue;
         }
 
-        .three{
-            display: flex;
-            width: 180px;
-            justify-content: space-between;
- 
+        #menu .panoSelect{
+            position: relative;
+            margin: 10px;
+            cursor: pointer;
+            background-color: violet;
         }
 
-        #tip{
+        #menu .pano .title,#menu .panoSelect .title{
             position: absolute;
-            right:15px;
-            bottom: 15px;
-            color: gray;
-            display: none;
+            top:50%;
+            left:50%;
+            transform:translate(-50%,-50%);
+            font-size: 18px;
+            width: 120px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #menu .pano .thumb img,#menu .panoSelect .thumb img{
+            width:120px;
         }
 
+        *::-webkit-scrollbar {
+            /*滚动条整体样式*/
+            width: 8px;/*定义纵向滚动条宽度*/
+            height: 8px;/*定义横向滚动条高度*/
+        }
+
+        *::-webkit-scrollbar-thumb {
+            /*滚动条内部滑块*/
+            border-radius: 8px;
+            background-color: hsla(220, 4%, 58%, 0.3);
+            transition: background-color 0.3s;
+        }
+
+        *::-webkit-scrollbar-thumb:hover {
+            /*鼠标悬停滚动条内部滑块*/
+            background: #bbb;
+        }
+
+        *::-webkit-scrollbar-track {
+            /*滚动条内部轨道*/
+            background: #ededed;
+        }
+
+
     </style>
 </head>
 
@@ -121,28 +160,89 @@
         
     </div>
 
-<!-- 
-    <div class="controls">
-        <div class="up">UP</div>
-        
-        <div class="three">
-            <div class="left">LEFT</div>
-            <div class="ok">OK</div>
-            <div class="right">RIGHT</div>
-        </div>
 
-        <div class="down">DOWN</div>
-        
-    </div> -->
 
     <div id="tip">Walking...</div>
 
+    <div id='menu'>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div class="pano">
+            <div class="title">ddd</div>
+            <div class="thumb"><img src='panos/01frontGate4k_b.jpg' /></div>
+        </div>
+        <div >
+            -
+        </div>
+
+    </div>
+
 
 
     <div class="ctrlBtn"></div>
 
+    <script src="js/three.min.js"></script>
+    <script src="js/tween.umd.js"></script>
 
-    <script src="app.min.js"></script>
+    <script src="main2.js"></script>
 
     <!-- <script src="app.min.js"></script> -->