test three

pano3.html

@@ -55,11 +55,21 @@
             
         }
 
+        #redPoints{
+            position: relative;
+            right:15px;
+        }
+
         .navigation .cam_img{
             width: 32px;
             height: 32px;
         }
 
+        .navigation .point_img{
+            width: 8px;
+            height: 8px;
+        }
+
         .controls{
             display: flex;
             z-index: 10;
@@ -73,6 +83,7 @@
         .up,.down,.left,.right,.ok{
             display: flex;
             cursor: pointer;
+            background-color: steelblue;
         }
 
         .three{
@@ -95,6 +106,9 @@
       <div style="position:relative">
         <div id='map'><img class="map_img" src="panos/HomeHouseMap.png"/></div>
         <div id='cam'><img class="cam_img" src="panos/HomePoint.png"/></div>
+        <div id='redPoints'>
+            <!-- <img id='Li' class="point_img" src="panos/redPoint.png"/> -->
+        </div>
     </div>
         
     </div>
@@ -117,7 +131,7 @@
 
     <div class="ctrlBtn"></div>
 
-    <script type="module" src="app.min.js"></script>
+    <script type="module" src="test.js"></script>
 
     <script type="text/javaScript">
 

test.js

@@ -0,0 +1,118 @@
+import * as THREE from './js/three.module.js';
+
+var camera, scene, renderer,controls,material;
+
+var isUserInteracting = false,
+    onMouseDownMouseX = 0,
+    onMouseDownMouseY = 0,
+    lon = 0,
+    onMouseDownLon = 0,
+    lat = 0,
+    onMouseDownLat = 0,
+    phi = 0,
+    theta = 0;
+
+init();
+animate();
+
+function init(texture) {
+
+    var container, mesh;
+
+    container = document.getElementById('container');
+
+    // camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
+    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1100);
+    camera.target = new THREE.Vector3(0, 0, 0);
+
+    scene = new THREE.Scene();
+
+    var geometry = new THREE.SphereBufferGeometry(500, 60, 40);
+    geometry.scale(-1, 1, 1);
+    // invert the geometry on the x-axis so that all of the faces point inward
+
+    material = new THREE.MeshBasicMaterial({ color:0xffff00});
+
+    mesh = new THREE.Mesh(geometry, material);
+
+    scene.add(mesh);
+
+    renderer = new THREE.WebGLRenderer();
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    container.appendChild(renderer.domElement);
+
+    camera.position.set( 0, 0, 10 );
+
+    window.camera=camera
+
+    window.addEventListener('resize', onWindowResize, false);
+
+}
+
+function onWindowResize() {
+
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize(window.innerWidth, window.innerHeight);
+
+}
+
+
+//------------------------------------------
+function animate() {
+    requestAnimationFrame(animate);
+    update();
+}
+
+function update() {
+
+
+
+    renderer.render(scene, camera);
+
+}
+function reloadData() {
+    window.location.href="pano_object_scenne_test.html";
+}
+
+var btn = new tvSysBtnBind({
+    id: "Jdoc",
+    className: "ctrlBtn",
+    currentClass: "current",
+    keyRemoveDefault: false,
+    effect: "base",
+    currentIndex: 0,
+    onLoad: function(e) {
+      console.log(e);
+    },
+    onPress:function() {
+        var keyCode = this.event.keyCode;
+        console.log(keyCode);
+        switch (keyCode) {
+            case 37:
+            // reloadData();
+            break;
+            case 39:
+            
+            break;
+            case 38:
+            
+            break;
+            case 40:
+            
+            break;
+        
+            default:
+                break;
+        }
+    },
+    onEnterPress: function() {
+       alert(12321);
+    },
+    onBack: function() {
+       
+    }
+});
+