Documented code

assets/js/map3d.js

@@ -12,10 +12,6 @@ import {
 import {
   GLTFLoader
 } from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/GLTFLoader.js';
-import {
-  RGBELoader
-} from 'https://cdn.jsdelivr.net/npm/three@0.119.1/examples/jsm/loaders/RGBELoader.js';
-
 
 var container, stats, controls;
 var camera, scene, renderer;
@@ -27,9 +23,16 @@ render();
 
 var height, width;
 
+/**
+ * Initializes the 3D plan
+ * Creates and loads every needed things
+ */
 function init() {
 
 
+  // 
+  // Creates HTML 
+  //
   container = document.createElement('div');
   container.id = 'map3d';
 
@@ -37,14 +40,18 @@ function init() {
   width = document.querySelector('#maps').clientWidth;
   var svg = document.querySelector('#maps #map');
   document.querySelector('#maps').insertBefore(container, svg);
+
+
+  //
+  //  Creates cameras and scene
+  //
   camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.75, 20000);
-
   camera.position.set(500,1500,500); 
-
   scene = new THREE.Scene();
 
-
+  //
   // LIGHTS
+  //
   let sol = new THREE.AmbientLight(0x404040, 1.0);
   scene.add(sol);
 
@@ -58,16 +65,23 @@ function init() {
 
   //scene.background = new THREE.Color( 0xff0000 );
 
+
   raycaster = new THREE.Raycaster();
   mouse = new THREE.Vector2()
 
+  //
   // Loading screen
+  //
   const loadingManager = new THREE.LoadingManager( () => {
     const loadingScreen = document.getElementById('loading-screen');
     loadingScreen.classList.add('fade-out');
     loadingScreen.addEventListener('transitionend', onTransitionEnd);
   });
 
+
+  //
+  // Load the 3D model
+  //
   var loader = new GLTFLoader(loadingManager);
 
   loader.load('assets/images/map3D.glb', function(gltf) {
@@ -85,6 +99,9 @@ function init() {
 
 
 
+  //
+  // RENDERER
+  //
   renderer = new THREE.WebGLRenderer({
     antialias: true,
   });
@@ -100,6 +117,9 @@ function init() {
   var pmremGenerator = new THREE.PMREMGenerator(renderer);
   pmremGenerator.compileEquirectangularShader();
 
+  //
+  // CONTROLS
+  //
   controls = new OrbitControls(camera, renderer.domElement);
   controls.addEventListener('change', render); // use if there is no animation loop
   controls.minDistance = 0;
@@ -109,7 +129,9 @@ function init() {
   controls.maxPolarAngle = Math.PI/2.05;
   controls.update();
 
+  //
   // Load Light
+  //
   var ambientLight = new THREE.AmbientLight( 0xcccccc );
   scene.add( ambientLight );
         
@@ -117,9 +139,11 @@ function init() {
   directionalLight.position.set( 0, 1, 1 ).normalize();
   scene.add( directionalLight );	
 
-  window.addEventListener('resize', onWindowResize, false);
 
-  
+  //
+  // EVENTS
+  //
+  window.addEventListener('resize', onWindowResize, false);  
 
   renderer.domElement.addEventListener('click', onClick, false);        // Mouse
   //renderer.domElement.addEventListener('mousemove', onMouseOver,false);
@@ -127,7 +151,10 @@ function init() {
 
 }
 
-// Return all the selectors in the database
+/**
+ * Get all the selectors (buildings identifiers)
+ * @returns Array with all the selectors
+ */
 function getSelectors() {
   let info = {};
   let object = {
@@ -160,9 +187,8 @@ function handleClickOnBuilding(x,y) {
 
   // If we clicked on a building
   if (intersects.length > 0) {
-    // console.log(intersects);
+
-    //console.log( intersects[0].object.name.toString());
+    var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on
-    var selector = intersects[0].object.name.toString().toLowerCase();
 
     // Wait for getSelectors() to be done
     // If we do not wait, everything will be executed before checking what is inside the database
@@ -203,9 +229,9 @@ function handleClickOnBuilding(x,y) {
   }
 }
 
-//
+/**
-// When the user clicks on a building with a mouse
+ * Get the position where the user clicked (mouse) on a building and process it
-// 
+ */
 function onClick() {
 
   event.preventDefault();
@@ -221,9 +247,9 @@ function onClick() {
  
 }
 
-//
+/**
-// When the user clicks on a building on a smartphone
+ * Get the position where the user clicked (smartphone) on a building and process it
-//
+ */
 function onTouchEnd() {
   var clientX, clientY;
 
@@ -237,6 +263,11 @@ function onTouchEnd() {
   handleClickOnBuilding(mouse.x, mouse.y);
 }
 
+
+/**
+ * Process something when the user moved the mouse over a building
+ * @todo add text over the building
+ */
 function onMouseOver() {
 
   event.preventDefault();
@@ -313,9 +344,10 @@ function makeLabelCanvas(baseWidth, size, name) {
   return ctx.canvas;
 }
 
-//
+
-// Auto-resize the canvas
+/**
-//
+ * Auto-resizes the canvas when window size is updated
+ */
 function onWindowResize() {
 
   height = document.querySelector('#main-content .inner').clientHeight;
@@ -323,19 +355,22 @@ function onWindowResize() {
   camera.aspect = window.innerWidth / window.innerHeight;
   camera.updateProjectionMatrix();
 
-  renderer.setSize(width * 0.9, window.innerHeight * 0.75);
+  renderer.setSize(width * 0.9, window.innerHeight * 0.75); // 0.9 and 0.75 so it looks comfortable on the screen
   
   render();
 
 }
 
+/**
+ * Render the scene
+ */
 function render() {
 
   renderer.render(scene, camera);
 }
 
 /*
- *  When the model finished loading
+ * Remove the loader when the model loaded
  */
 function onTransitionEnd( event) {
   event.target.remove();

classes/dao.php

@@ -107,25 +107,39 @@ class Dao
         }
     }
 
+    /**
+     * Add a building in the database
+     * @param String $title             = Name of the building displayed
+     * @param String $description       = Description of the building
+     * @param String $selector          = Identifier of the building (unique)
+     * @return Mixed                    = if error : false
+     *                                    else     : Array of the row added as an array indexed by column name
+     */
     public function create_building($title, $description, $selector) {
         $sql = 'INSERT INTO map_insa (title, description, selector) VALUES(:title, :description, :selector)';
-        //var_dump($title, $description, $selector);
+        
         $query = $this->conn->prepare($sql);
         $query->execute(array(
             ':title'        => $title,
             ':description'  => $description,
             ':selector'     => $selector,
         ));
-        //var_dump($query->errorInfo());
+
         return $query->fetch(PDO::FETCH_ASSOC);
     }
 
+    /**
+     * Remove a building in the database
+     * @param String $selector          = Identifier of the building (unique)
+     * @return Mixed                    = if error : false
+     *                                    else     : Array with the selector used to remove from the database 
+     */
     public function delete_building($selector) {
         $sql = 'DELETE FROM map_insa WHERE selector=?';
-        //var_dump($selector);
+        
         $query = $this->conn->prepare($sql);
         $query->execute([$selector]);
-        //var_dump($query->errorInfo());
+
         return $query->fetch(PDO::FETCH_ASSOC);
     }
 }