Modélisation 3D, WebGL & WebVR avec ThreeJS

Lors de mon stage au sein de l’agence MBA à Rennes j’ai eu l’occasion de réaliser un prototype en réalité virtuelle, accessible directement dans le navigateur. J’ai commencé par une phase de recherches qui m’a permis de déterminer les outils les plus appropriés : la bibliothèque javascript ThreeJS me semblait alors être la solution la plus pertinente, ainsi que le logiciel Blender pour la modélisation 3D.

J’ai donc dans un premier temps modélisé une scène représentant le bâtiment de l’agence et ses environs, avant de l’intégrer à une page web à l’aide de ThreeJS. J’ai alors pu gérer la caméra (qui change si l’on est sur un appareil mobile ou desktop : la réalité virtuelle n’est accessible que sur mobile et tablette), et les différentes lumières. Pour améliorer la scène, j’ai crée deux fonctions qui génèrent des arbres et des nuages, leur nombre est aléatoire ainsi que leur taille et leur emplacement.

Sur la version desktop, l’utilisateur peut se déplacer dans la scène à l’aide de la souris et des touches directionnelles. Sur appareil mobile, s’il est munit d’un gyroscope, il suffit de regarder à travers l’appareil et de le pivoter pour visualiser toute la scène. On peut aussi utiliser un cardboard pour une immersion totale.