Project name:

Maquette 3D

Project description:

Pour afficher le résultat final. Quelques secondes de chargement sont nécessaires…mais ça vaut le coup d’oeil. Vous devriez voir apparaitre quelque chose comme ça:

Site_Web

Parmi les fonctions de cette maquette (disponible dans le menu en haut à droite) : on peut afficher les carroyage de population fournis par l’INSEE. Ces carroyage sont interactifs, on peut afficher les nombres d’individus vivant dans chaque carreau en cliquant dessus. On peu également faire varier la hauteur de l’océan et afficher le pourcentage de population impactée sur l’ile.

Ce projet est né lors de mon contrat avec le Conservatoire du littoral (cf: Projet de carto 3D). En cherchant une alternative au logiciel de LandSim3D de Bionatics pour l’affichage de données géographique en 3D sur le web, j’ai découvert ce plug-in de QGIS. Totalement open-source et très simple d’utilisation, il permet en un clin d’oeil de passé du caneva de travail 2D de QGIS à une maquette 3D compatible avec la plupart des navigateur web.

Site_Web3
Résultat brut obtenu avec le plugin QGIS2Threejs

Travaillant sur le littoral, le rendu esthétique me semblait rudimentaire. Mon objectif était donc d’ajouter une texture sur la mer et d’avoir un plan lointain plus naturel.

Commençons par le plus simple: le plan lointain (skybox).

Vous venez donc de créer une maquette 3D avec le plugin QGIS2Threejs et vous voulez avoir un plan lointain un peu plus joli que ce magnifique bleu hôpital. Commencer par télécharger le dossier dans lequel se trouve les images pour notre skybox ici .

Dézipper se dossier dans le repertoire dans lequel se trouve votre maquette (par exemple C:\Users\you\Desktop\maquette_3D\img).

Maintenant passons au code.  Dans le fichier javascript QGIS2Threejs.js, il y a une fonction appelée “load project” dans laquelle il y a les informations sur le rendu de la maquette (aux alentour de la ligne 200). A l’interieur de cette fonction ajouter les lignes suivantes:

// light
if (project.buildCustomLights) project.buildCustomLights(this.scene);
else this.buildDefaultLights(this.scene);

// camera modified
this.camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 0.1, 100000 );
this.camera.position.set( 0, -100, 70 );
    
//light modified
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
light.position.set( - 1, 1, - 1 );
this.scene.add(light);

Ensuite il faut ajouter la skybox:

// load skybox
var imagePrefix = "img/"; /*correspond au dossier dans lequel vous avez dezippé les images*/
var directions  = ["px1", "nx1", "nz1", "pz1", "py1", "ny1"]; /* le nom des images*/
var imageSuffix = ".jpg"; /* leurs suffixes*/
var skyGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 ); /*la géométrie xyz de la boite sur laquelle les images vont venir se coller*/
    
var materialArray = [];
    
for (var i = 0; i < 6; i++)
materialArray.push( new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture( imagePrefix + directions[i] + imageSuffix ),
side: THREE.BackSide
}));
        
var skyMaterial = new THREE.MeshFaceMaterial( materialArray );
var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );
this.scene.add( skyBox );

Ça y est notre skybox apparait.

Pour la texture de la mer:

(La suite bientôt)

Leave a Reply

Your email address will not be published. Required fields are marked *