TFE — Hypoxie d’altitude
Lov lite, men hold nøyaktig
Norsk ordtak
Voici maintenant plus de trois semaines que je suis plongé corps et âme dans le plus exigeant et complexe des scénarios de ce périple qu’est mon TFE. Et je dois avouer que mon projet est aussi complexe que je l’avais imaginé, même plus encore. Mais c’est cela qui rend cette ascension si intéressante, repousser ses limites, ses connaissances. Gravir des sommets dans l’inconnu.
Et pour ce qui est de partir dans l’inconnu, je dois dire que je ne me suis pas retenu. Que ce soit entre la réalisation de contenu 360° ou encore de mon choix de framework, je gravis les mains encombrées cet objectif que je me suis fixé. Souvent avec des regrets face aux problèmes qui font escale sur ma route, mais toujours récompensé d’un sentiment de fierté quand j’arrive à les enjamber.
Immersion · 360°
La première étape essentielle pour ne pas me perdre en chemin par la suite est de configurer les souvenirs récoltés précédemment pour qu’ils soient utilisables dans le projet. Je me lance d’abord dans plusieurs sessions de recherches et puis d’application pour transformer mon contenu visuel en 360° de la manière la plus propre et fonctionnel possible.
Ne possédant aucun contenu nativement désigné pour, la tâche est quelque peu ardue, mais le résultat obtenu me satisfait. Je retrouve cette sensation d’immersion que je souhaite avoir.
De nouvelles perspectives · Three.js
Une fois mon contenu transformé, je m’attèle à la découverte d’une libraire JavaScript qui permet de créer du contenu 3D, Three.Js. Cela me permet ainsi d’utiliser mes visuelles dans un espace qui donne à l’utilisateur la possibilité de « voyager » à travers ceux-ci.
Cette partie fut très sympathique à découvrir, les possibilités avec cette librairie semble infinie avec la bonne documentation et la curiosité. Même si cela n’a pas été des plus facile à prendre en main, en suivant bien la documentation présente, on arrive tant bien que mal à nos fins avec un peu de détermination.
Pour réaliser mon essai, je préfère ouvrir une instance JavaScript Vanilla pour être sûr de bien comprendre la manière de fonctionner de Three.Js. Et malgré quelques difficultés au niveau des contrôles et des textures, j’arrive à réaliser ce qui va être l’outil clé de mon projet.
Challenge · Vue.js
Voici le challenge le plus redouté de toute cette aventure, Vue.Js. Pour ce TFE, j’ai voulu me confronter à ce framework que nous avons découvert cette année, et ce, pour plusieurs raisons. La curiosité, apprendre un environnement utilisé par les boîtes actuellement et qui me servira plus tard et l’envie de me surpasser.
Apprendre sur le tas une nouvelle conception de codage est quelque peu à double tranchant. Il m’a bien fallu une semaine pour apprendre les bases et mettre en pratique, cela m’a valu quelques pertes de souffle et m’en provoquera encore quelques-unes jusqu’à la fin.
La première difficulté à laquelle j’ai été confronté fut la création d’un carrousel. Premier vrai exercice d’application de la théorie qui n’est pas des moindres pour rentrer dans le vif du sujet et comprendre les différents patterns possibles.
Template, components, data, mounted, computed, methods, etc.
La partie qui m’a posé le plus problème fut l’importation de mon code Three.Js réalisé en Vanilla. J’ai d’abord tenté d’importer mon fichier JavaScript directement dans mon projet Vue en espérant ainsi gagner du temps, mais après plusieurs tentatives ratées, cela est un échec.
Pour incorporer mon code en Vue, je n’ai eu d’autre choix que de réécrire tout mon code selon les principes requis par le framework. Et après de nombreuses heures à plancher dessus, je réussis à rendre fonctionnel ma scène 360.
En réussissant cela, c’est pas loin de 70% de mon projet qui est mis en place ! Les dernières étapes sont d’appliquer le design de ma maquette et d’incorporer les vocaux et dialogues. On ne lâche rien !
Vous êtes ici :
TFE — Case Study n°1 [Préparation de l’ascension]
TFE — Case Study n°2 [Début d’horizon]
TFE — Case Study n°3 [Hypoxie d’altitude]
TFE — Case Study n°4 [bientôt disponible]