Merge branch 'main' into alena-tutorial

Author: alenaphuonganh

threejs/index.html

@@ -169,18 +169,6 @@
 
     </div>
 
-    <!-- BOTTOM LEFT SIDEBAR CONTROLS -->
-    <div id="bottom-left-sidebar-controls">
-        <div id="bv-controls">
-            <button id="bv-btn"><i class="fa-solid fa-street-view"></i></i></button>
-        </div>
-
-        <div id="bv-storey-controls">
-            <button id="bv-storey-btn"><i class="fa-solid fa-circle-info" alt="bv"></i></button>
-            <div id="bv-dropdown"></div>
-        </div>
-    </div>
-
     <div id="scene-container">
         <div id="storey-manager"></div>
     </div>

threejs/package-lock.json

@@ -27,6 +27,11 @@ import { LocationManager, LocationSceneManager } from "./location";
 import { BASEMAP_BOUNDARIES } from "./basemap";
 import { CjHelper } from "./cjHelper";
 
+
+/**
+ * This class acts as a collection point for the instances of most other map functionality classes.
+ * Additionally this is where the loading and rendering of the gltf file occurs.
+ */
 export class Map {
     /**
      *
@@ -98,6 +103,9 @@ export class Map {
         requestAnimationFrame(this.render);
     }
 
+    /**
+     * Create the threejs scenes and initialize the skybox.
+     */
     _initScenes() {
         this.scene = new THREE.Scene();
         const loader = new THREE.CubeTextureLoader();
@@ -116,6 +124,9 @@ export class Map {
         this.iconsScene = new THREE.Scene();
     }
 
+    /**
+     * Define the lights used in the scene.
+     */
     _initLights() {
         const color = 0xffffff;
 
@@ -127,6 +138,9 @@ export class Map {
         this.scene.add(this.light.target);
     }
 
+    /**
+     * Begin the loading of the basemap layers.
+     */
     setBasemap(url, layer) {
         if (this.activeBasemap) {
             this.scene.remove(this.activeBasemap);
@@ -155,6 +169,12 @@ export class Map {
         return getTileCacheStats();
     }
 
+    /**
+     * Create the three renderers:
+     * 1. glRenderer for the 3D objects
+     * 2. css3D renderer for the position market
+     * 3. css2D renderer for the icons and text objects
+     */
     _initRenderers() {
         // WebGL renderer for 3D objects
         this.glRenderer = new THREE.WebGLRenderer({
@@ -165,7 +185,7 @@ export class Map {
         this.glContainer = this.glRenderer.domElement;
         this.mainContainer.appendChild(this.glContainer);
 
-        // CSS3D renderer for location
+        // CSS3D renderer for position
         this.css3dRenderer = new CSS3DRenderer();
         this.css3dContainer = this.css3dRenderer.domElement;
         this.css3dContainer.style.position = "absolute";
@@ -185,6 +205,9 @@ export class Map {
         this._resizeWindow();
     }
 
+    /**
+     * Create the layerManager object
+     */
     _initLayerManager() {
         this.layerManager = new LayerManager(
             this.scene,
@@ -193,6 +216,9 @@ export class Map {
         );
     }
 
+    /**
+     * Create the buildingView object
+     */
     _initBuildingView() {
         this.buildingView = new BuildingView(
             this.cameraManager,
@@ -202,6 +228,9 @@ export class Map {
         );
     }
 
+    /**
+     * Create the picker object
+     */
     _initPicker() {
         this.pickHighlighter = new Highlighter(PICKED_COLOR);
         this.picker = new ObjectPicker(
@@ -214,6 +243,9 @@ export class Map {
         this.layerManager.picker = this.picker;
     }
 
+    /**
+     * Create the searcher object
+     */
     _initSearcher() {
         this.searcher = new Searcher(
             this.cameraManager,
@@ -225,12 +257,18 @@ export class Map {
         initSearchBar(this.searcher, search_delay, search_result_count);
     }
 
+    /**
+     * Create the geometryColorManager object
+     */
     _initGeometryColorManager() {
         this.geometryColorManager = new GeometryColorManager(
             this.scene
         );
     }
 
+    /**
+     * Create a variety of eventListeners
+     */
     _attachEvents() {
         var hasMouseMoved = false;
         // this.hasMouseMovedInFrame = false;
@@ -323,6 +361,9 @@ export class Map {
         );
     }
 
+    /**
+     * Handles resizing of the window
+     */
     _resizeWindow() {
         const { clientWidth: width, clientHeight: height } = this.glContainer;
         this.cameraManager.resizeCameras(width, height);
@@ -331,6 +372,9 @@ export class Map {
         this.css3dRenderer.setSize(width, height);
     }
 
+    /**
+     * Loads the gltf file containing all scene geometry
+     */
     loadGLTF(path) {
         // const allBuildingsObjectKeys = this.cjHelper.getAllBuildingsObjectKeys();
         const loader = new GLTFLoader();
@@ -395,6 +439,9 @@ export class Map {
         );
     }
 
+    /**
+     * Handles operations that require being updated every frame.
+     */
     render(time) {
         setTimeout(() => {
             requestAnimationFrame(this.render);
@@ -408,6 +455,9 @@ export class Map {
         this.light.target.position.copy(this.cameraManager.controls.target);
     }
 
+    /**
+     * Enables visibility of lod_2 objects (the buildings)
+     */
     lodVis(lod = "lod_2") {
         this.model.traverse((child) => {
             child.visible = false;

threejs/src/app.js

@@ -4,13 +4,25 @@ import { Scene } from "three";
 import { OutlineManager } from "./outlines";
 import { CjHelper } from "./cjHelper";
 import cityjson from "../assets/threejs/buildings/attributes.city.json" assert { type: "json" };
-import { LayerManager } from "./layers";
 import { StoreyManager } from "./storeyManager"
 
 const NOT_INITIALISED = 0;
 const INITIALISED = 1;
 const ACTIVATED = 2;
 
+
+/**
+ * This function handles all operations related to "building view".
+ * With "building view" is meant the state that the map enters when viewing the floor plan of a building.
+ * In this state the camera is locked to orthographic mode, the exterior of the building being view disappears,
+ * and the interior of this building becomes visible.
+ * 
+ * Building view can be one of three states:
+ * 1. Not initialized: when no building is selected and the map is not in building view.
+ * 2. Initialized: when a building is selected, but building has not be activated yet.
+ * 3. Activated: when building view has been activated.
+ * 
+ */
 export class BuildingView {
     /**
      *
@@ -55,6 +67,12 @@ export class BuildingView {
         this._updateStatus(INITIALISED);
     }
 
+    /**
+     * @param {string} buildingObjectKey: The cityjson key of the building object that building view 
+     * should be activated for.
+     * 
+     * Set the current building.
+     */
     setBuilding(buildingObjectKey) {
         if (this._isActivated()) {
             console.error("Cannot update the building without deactivating.");
@@ -76,6 +94,11 @@ export class BuildingView {
         );
     }
 
+    /**
+     * @param {string} storeyCode: The code of the new storey that needs to be switched to.
+     * 
+     * Sets the new storey, and calls the necessary update functions.
+     */
     setStorey(storeyCode) {
         if (this.storeyCode == storeyCode) {
             return;
@@ -87,6 +110,9 @@ export class BuildingView {
         }
     }
 
+    /**
+     * Enables the viewing of the current storey.
+     */
     _updateView() {
         // Get the storeys
         const roomsObjectKeys = this._getRoomsObjectKeys();
@@ -105,6 +131,9 @@ export class BuildingView {
         this._applyOutlines(roomsObjects, "lod_0", "interior");
     }
 
+    /**
+     * Makes all changes necessary when enabling building view.
+     */
     activate() {
         if (this._isActivated()) {
             return;
@@ -134,9 +163,6 @@ export class BuildingView {
         this.buildingTranslationZ = -bbox.min.y + 1;
         this.buildingObject.translateZ(this.buildingTranslationZ);
 
-        // Populate the buttons to switch between storeys
-        this._populateStoreyButtons();
-
         const available_storeys = this._getStoreyObjectKeys();
 
         this.storeyManager.activate(this.buildingObjectKey, this.storeyCode, available_storeys);
@@ -146,6 +172,9 @@ export class BuildingView {
         this._updateStatus(ACTIVATED);
     }
 
+    /**
+     * Resets everything necessary to leave building view.
+     */
     deactivate() {
         if (this._isInitialisedNotActivated()) {
             return;
@@ -179,6 +208,9 @@ export class BuildingView {
         this._updateStatus(INITIALISED);
     }
 
+    /**
+     * Clears building data when uninitializing a building
+     */
     uninitialise() {
         if (this._isNotInitialised()) {
             return;
@@ -191,7 +223,7 @@ export class BuildingView {
 
         this.buildingObjectKey = null;
         this.buildingMeshKey = null;
-        this.floor = null;
+        // this.floor = null;
         this._updateStatus(NOT_INITIALISED);
     }
 
@@ -251,6 +283,11 @@ export class BuildingView {
         return sortedStoreyObjectKeys;
     }
 
+    /**
+     * Returns the keys for all room objects of the current storey
+     *
+     * @return {array}: An array containing all objects keys of the rooms of the current storey.
+     */
     _getRoomsObjectKeys() {
         // Get the keys of the storeys
         const storeysObjectKeys = this._getStoreyObjectKeys();
@@ -310,27 +347,4 @@ export class BuildingView {
             }
         });
     }
-
-    _populateStoreyButtons() {
-        const storey_dropdown = document.getElementById("bv-dropdown");
-        storey_dropdown.innerHTML = "";
-
-        const storeysObjectKeys = this._getStoreyObjectKeys();
-        for (var storeyCode of Object.keys(storeysObjectKeys)) {
-            var a = document.createElement("a");
-            a.appendChild(document.createTextNode(storeyCode));
-            a.addEventListener("click", (event) => {
-                this.setStorey(storeyCode);
-
-                // Close the dropdown after selecting a storey
-                const bvDropdown = document.getElementById("bv-dropdown");
-                if (bvDropdown) {
-                    bvDropdown.style.display = "none";
-                }
-            });
-
-            a.href = "#";
-            storey_dropdown.appendChild(a);
-        }
-    }
 }