diff --git a/assets/js/map3d.js b/assets/js/map3d.js index 6f397d1..bb07cd6 100644 --- a/assets/js/map3d.js +++ b/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(); + + var selector = intersects[0].object.name.toString().toLowerCase(); // Name of the building we clicked on // 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(); diff --git a/classes/dao.php b/classes/dao.php index 40c6247..f3c9228 100755 --- a/classes/dao.php +++ b/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); } }