Merge pull request #27 from amosproj/sprint-03-release-candidate

Sprint 03 release candidate merged into main branch
amosproj · May 5, 2021 · 188a91c · 188a91c
2 parents 92c3e6d + 6a8504b
commit 188a91c
Show file tree

Hide file tree

Showing 20 changed files with 372 additions and 50 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,9 @@
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5502
+}
diff --git a/assets/0/0r3.jpg b/assets/0/0r3.jpg
diff --git a/assets/0/1r3.jpg b/assets/0/1r3.jpg
diff --git a/assets/0/2r3.jpg b/assets/0/2r3.jpg
diff --git a/assets/0r3.jpg b/assets/0r3.jpg
diff --git a/assets/data.json b/assets/data.json
@@ -0,0 +1,55 @@
+{
+    "lon0":11.111022598146052,
+    "lat0":49.46121044410717,
+    "images":[
+        [
+            11.111036219889447,
+            49.461208967856706,
+            1.854,
+            0.998774,
+            0.00023,
+            0.000678,
+            0.049502,
+            0.0
+        ],
+        [
+            11.111047315413398,
+            49.4612122325651,
+            1.853,
+            0.965228,
+            -8.6e-05,
+            0.003351,
+            0.261389,
+            0.0
+        ],
+        [
+            11.111058961786934,
+            49.461220241271604,
+            1.853,
+            0.859253,
+            -0.002567,
+            0.00361,
+            0.511532,
+            0.0
+        ]
+    ],
+    "floors":{
+        "EG":{
+            "z":0.0,
+            "i":[
+                [
+                    0,
+                    300
+                ]
+            ],
+            "map":{
+                "width":2728,
+                "height":2489,
+                "x":1405,
+                "y":1744,
+                "density":50,
+                "name":"map0"
+            }
+        }
+    }
+}
diff --git a/assets/map-small.jpg b/assets/map-small.jpg
diff --git a/assets/map0.png b/assets/map0.png
diff --git a/src/css/main.css b/src/css/main.css
@@ -20,4 +20,5 @@ body {
     cursor: grabbing;
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
-}
+}
+
diff --git a/src/index.html b/src/index.html
@@ -7,6 +7,7 @@
 </head>
     <body>
         <script src="libs/three.min.js"></script>
+        <script src="libs/jQuery.min.js"></script>
         <script type="module" src="js/main.js"></script>
 
         <div id="pano-viewer"></div>

diff --git a/src/js/main.js b/src/js/main.js
@@ -1,74 +1,83 @@
 "use strict";
+import { ViewerImageAPI } from "./viewer/ViewerImageAPI.js";
 import { ViewerViewState } from "./viewer/ViewerViewState.js";
+import { ViewerPanoAPI } from "./viewer/ViewerPanoAPI.js";
+import { MAX_FOV, DEFAULT_FOV } from "./viewer/Globals.js"
 
-let camera, scene, renderer;
 
-let onPointerDownMouseX = 0, onPointerDownMouseY = 0,
-    longitude = 0, onPointerDownLon = 0,
-    latitude = 0, onPointerDownLat = 0,
-    phi = 0, theta = 0;
+let viewerPanoAPI, viewerViewState, cameraMap, sceneMap, renderer;
+let spriteMap; // for createHUDSprites and updateHUDSprites
 
-const DEFAULT_FOV = 90, MAX_FOV = 120, MIN_FOV = 5;
+let onPointerDownMouseX = 0, onPointerDownMouseY = 0, onPointerDownLon = 0, onPointerDownLat = 0;
 
 init();
 animate();
 
 function init() {
+    const width = window.innerWidth;
+    const height = window.innerHeight;
 
     const container = document.getElementById('pano-viewer');
     // the only html element we work with (the pano-viewer div)
 
-    camera = new THREE.PerspectiveCamera(DEFAULT_FOV, window.innerWidth / window.innerHeight, 1, 1100);
-    scene = new THREE.Scene();
+    // ----- init Panorama scene -----
+    viewerPanoAPI = new ViewerPanoAPI();
+    viewerViewState = new ViewerViewState(DEFAULT_FOV, 0, 0)
 
     // Create a Sphere for the image texture to be displayed on
     const sphere = new THREE.SphereGeometry(500, 60, 40);
     // invert the geometry on the x-axis so that we look out from the middle of the sphere
     sphere.scale( -1, 1, 1);
 
     // load the 360-panorama image data (one specific hardcoded for now)
-    const texture = new THREE.TextureLoader().load( '../assets/0r3.jpg' );
-    texture.mapping = THREE.EquirectangularReflectionMapping; // not sure if this line matters
+    const texturePano = new THREE.TextureLoader().load( '../assets/0/0r3.jpg' );
+    texturePano.mapping = THREE.EquirectangularReflectionMapping; // not sure if this line matters
 
     // put the texture on the spehere and add it to the scene
-    const material = new THREE.MeshBasicMaterial({ map: texture });
+    const material = new THREE.MeshBasicMaterial({ map: texturePano });
     const mesh = new THREE.Mesh(sphere, material);
-    scene.add(mesh);
+    viewerPanoAPI.scene.add(mesh);
+    // ----- -----
+
+    // ----- init Map scene -----
+    cameraMap = new THREE.OrthographicCamera( -width / 2, width / 2, height / 2, -height / 2, 1, 10 );
+    cameraMap.position.z = 10;
+    sceneMap = new THREE.Scene();
+
+    //Create new camera for 2D display
+    const textureLoader = new THREE.TextureLoader();
+    textureLoader.load( "../assets/map-small.jpg", createHUDSprites );
+    // ----- -----
 
     // create the renderer, and embed the attributed dom element in the html page
     renderer = new THREE.WebGLRenderer();
     renderer.setPixelRatio(window.devicePixelRatio);
     renderer.setSize(window.innerWidth, window.innerHeight);
+    renderer.autoClear = false; // To allow render overlay on top of panorama scene
+
     container.appendChild(renderer.domElement);
 
     // link event listeners to the corresponding functions
-    container.addEventListener('pointerdown', onPointerDown);
-
+    document.addEventListener('pointerdown', onPointerDown);
     document.addEventListener('wheel', onDocumentMouseWheel);
+    //document.addEventListener('resize', onWindowResize);
 
-    document.addEventListener('resize', onWindowResize);
-
-}
 
-function animate() {
+    let viewerImageAPI;
+
+    // hardcoded to work with assets/ for now
+    const jsonImageDataFilepath = "../assets/data.json";
 
-    requestAnimationFrame(animate);
-    update();
+    $.getJSON(jsonImageDataFilepath, function(data) {
+        viewerImageAPI = new ViewerImageAPI(data);
+    });
 
 }
 
-function update() {
-
-    phi = THREE.MathUtils.degToRad(90 - latitude);
-    theta = THREE.MathUtils.degToRad(longitude);
-
-    const x = 500 * Math.sin(phi) * Math.cos(theta);
-    const y = 500 * Math.cos(phi);
-    const z = 500 * Math.sin(phi) * Math.sin(theta);
-
-    camera.lookAt(x, y, z);
+function animate() {
 
-    renderer.render(scene, camera);
+    requestAnimationFrame(animate);
+    render();
 
 }
 
@@ -78,8 +87,8 @@ function onPointerDown(event) {
     onPointerDownMouseX = event.clientX;
     onPointerDownMouseY = event.clientY;
 
-    onPointerDownLon = longitude;
-    onPointerDownLat = latitude;
+    onPointerDownLon = viewerViewState.lonov;
+    onPointerDownLat = viewerViewState.latov;
 
     // Two new event listeneres are called to handle *how far* the user drags
     document.addEventListener('pointermove', onPointerMove);
@@ -90,11 +99,13 @@ function onPointerDown(event) {
 // handles continues update of the distance mouse moved
 function onPointerMove(event) {
 
-    longitude = (onPointerDownMouseX - event.clientX) * 0.2 + onPointerDownLon;
-    latitude = (event.clientY - onPointerDownMouseY) * 0.2 + onPointerDownLat;
+    let scalingFactor = viewerPanoAPI.camera().fov / MAX_FOV;
+
+    viewerViewState.lonov = (onPointerDownMouseX - event.clientX) * 0.1 * scalingFactor + onPointerDownLon;
+    viewerViewState.latov = (event.clientY - onPointerDownMouseY) * 0.1 * scalingFactor + onPointerDownLat;
 
-    // keep latitude within bounds because it loops back around at top and bottom
-    latitude = Math.max( -85, Math.min(85, latitude));
+    // keep viewerviewstate.latov within bounds because it loops back around at top and bottom
+    viewerViewState.latov = Math.max( -85, Math.min(85, viewerViewState.latov));
 
 }
 
@@ -107,21 +118,63 @@ function onPointerUp() {
 }
 
 function onDocumentMouseWheel(event) {
-
     // the 0.05 constant determines how quick scrolling in and out feels for the user
-    const fov = camera.fov + event.deltaY * 0.05;
+    viewerViewState.fov = viewerPanoAPI.camera().fov + event.deltaY * 0.05;
 
-    camera.fov = THREE.MathUtils.clamp(fov, MIN_FOV, MAX_FOV);
+    viewerPanoAPI.view(viewerViewState.lonov, viewerViewState.latov, viewerViewState.fov);
 
-    camera.updateProjectionMatrix();
+    viewerPanoAPI.camera().updateProjectionMatrix();
 
 }
 
+// currently not supported
 function onWindowResize() {
 
-    camera.aspect = window.innerWidth / window.innerHeight;
-    camera.updateProjectionMatrix();
+    const width = window.innerWidth;
+    const height = window.innerHeight;
 
-    renderer.setSize(window.innerWidth, window.innerHeight);
+    viewerPanoAPI.camera().aspect = width / height;
+    viewerPanoAPI.camera().updateProjectionMatrix();
+
+    cameraMap.left = - width / 2;
+    cameraMap.right = width / 2;
+    cameraMap.top = height / 2;
+    cameraMap.bottom = - height / 2;
+    cameraMap.updateProjectionMatrix();
+    updateHUDSprites();
+
+    renderer.setSize(width, height);
+
+}
+
+
+function createHUDSprites( texture ) {
+    //Texture is Map
+    const material = new THREE.SpriteMaterial( { map: texture } );
+    const width = material.map.image.width;
+    const height = material.map.image.height;
+    spriteMap = new THREE.Sprite( material );
+    spriteMap.center.set( 1.0, 0.0 ); // bottom right
+    spriteMap.scale.set( width, height, 1 );
+    sceneMap.add( spriteMap );
+    updateHUDSprites();
+
+}
+
+function updateHUDSprites() {
+
+    spriteMap.position.set(window.innerWidth / 2, -window.innerHeight / 2, 1 ); // bottom right
+
+}
+
+function render() {
+
+    viewerPanoAPI.view(viewerViewState.lonov, viewerViewState.latov, viewerViewState.fov);
+
+    renderer.clear();
+    renderer.render( viewerPanoAPI.scene, viewerPanoAPI.camera() );
+    renderer.clearDepth();
+    renderer.render( sceneMap, cameraMap );
 
 }
+
diff --git a/src/js/viewer/EventLayer.js b/src/js/viewer/EventLayer.js
@@ -0,0 +1,28 @@
+
+// Event position in viewer
+
+export class EventPosition {
+    constructor() {
+
+        this.x; //  Number // y coordinate of this image on the floor
+
+        this.y; // Number // y coordinate of this image on the floor
+    }
+
+}
+
+
+export class EventLayer {
+    constructor() {
+        this.viewer_contex; 
+    }
+
+    vwr_oncontext (xy, location ){
+    //Parameters: 
+    //xy EventPosition:  Pointer position
+    //location THREE.Vector3 : Local coordinates for pointer position+
+    viewer_contex = new ViewerContextItem()
+    return viewer_contex; 
+    }
+
+}
diff --git a/src/js/viewer/Globals.js b/src/js/viewer/Globals.js
@@ -0,0 +1 @@
+export const DEFAULT_FOV = 80, MAX_FOV = 100, MIN_FOV = 10;
diff --git a/src/js/viewer/ViewerImage.js b/src/js/viewer/ViewerImage.js
@@ -0,0 +1,21 @@
+"use strict";
+
+// Panorama Image
+export class ViewerImage {
+
+    constructor([panoLon, panoLat, panoZ, w, x, y, z, floorZ], imageIdx) {
+
+        this.floor; // : String // Name of floor which contains this image
+
+        this.floorZ = floorZ; // : Number // Z coordinate of this image on the floor
+
+        this.hidden; // : Boolean // Flag if this image is hidden
+
+        this.id = imageIdx; // : Number // Image number
+
+        this.pos = [panoLon, panoLat, panoZ]; // : [Number] // WGS 84 coordinates [longitude, latitude, z] of this image
+
+        this.orientation = new THREE.Quaternion(x, y, z, w);
+    }
+
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const DEFAULT_FOV = 80, MAX_FOV = 100, MIN_FOV = 10;