forked from vergnet/site-accueil-insa
Documented code
This commit is contained in:
Ronan
parent
0878258425
commit
4d9a5c1ca3
2 changed files with 77 additions and 28 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue