Case Study

Case Study : Side-project

Par Thomas Boucher

La rencontre avec three.js

La folie des grandeurs

Il faut pouvoir se lancer des défis à la hauteur de ses envies. Le projet portant sur un sujet au choix je me suis assez vite dirigé sur un projet qui me portait à coeur de développer : l'intégration de modèles de voitures à travers le web. Il me faut alors acquérir de nouvelles notions et compétences et n'ayant strictement aucune base de ce que représente la 3D sur les internets, je me suis appliqué pendant plusieurs soirées à explorer la documentation de threejs.

La voiture descend de l'homme

L'homme descend du ..

Pour ce projet, j'ai bénéficier des compétences d'un ami étudiant dans le domaine de la 3d qui s'est occupé de la partie modélisation de la voiture. Afin de pouvoir progresser correctement il me fallait absolument faire mes premiers tests avec différents objets 3Ds et construire plusieurs scènes afin de bien comprendre les bases de three js et être sûr de commencer le projet correctement une fois le modèle de la Rs7 terminé. Viens alors la création de ma première scène LXXXII, celle-ci représentant le fameux singe de Blender.

Tete de singe

Inspiration

Un design sombre et épuré

Lorsque le modèle de la voiture progressait, le design se construisait lui aussi. Il était établi dès le début que le design autour de l'intégration serait dans les tons noirs afin de se fondre aux couleurs mates et sombres de la voiture avec une touche de rouge rappelant le rouge des voitures Audi RS.

Le côté obscur de three.js

Rester calme tu dois

C'est par un lundi pluvieux que je reçus l'appel de mon ami me disant, non sans émotion, qu'il avait fini le modèle de la voiture. Quelle ne fut pas notre frustration lors de l'affichage de ce travail laborieux, la voiture ne reflétait aucun matériau et avait l'aspect d'une boule disco bon marché. C'est après plusieurs tentatives sereines d'exportations que l'on finit par conclure que le souci provenait du logiciel et non pas du code, en effet mon ami utilisait des plugins sur sa version de 3 DS Max, ceux-ci n'étaient pas supporter par three js.

première exportation

La lumière au bout du tunnel

Mise en place des éléments clés

Une fois les différents éléments de notre scène mit en place viennent ensuite les caméras, les différents types d'éclairages ainsi que tous les éléments essentiels au bon fonctionnent de l'intégration. Souhaitant des interactions avec la voiture, je me mis alors à devenir de plus en plus intime avec ce merveilleux language qu'est le Javascript. L'idée était de créer un effet de rotation de la voiture lors du changement de section. Ce fut une des étapes les plus laborieuses à travers le développement du projet. Et cet après plusieurs soirées passées sur les itérations de mouvements de l'objet, qu'il me parvient (enfin) une once de jugeote : et si je faisais tourner les caméras au lieu de l'objet lui-même . Enfin !

Silence Moteur Action

Vidéos et univers

Après avoir conclu la quasi-totalité du code, vient le placement d'éléments d'interactions afin de plonger au mieux l'utilisateur dans l'univers de la Rs7 et pour ce faire, quoi de mieux que de tourner des plans en plein Charleroi afin d'y intégrer le modèle de la voiture et les retravailler par le biais d'after-effect.

Image provenant du montage vidéo

Conclusion

Une experience des plus enrichissantes

C'est une fois que le résultat se concrétise que l'on peut commencer à souffler. Pour ma part j'ai trouvé cette opportunité de travailler sur un projet plus personnel très enrichissante. À travers ce défi d'autoapprentissage j'ai appris à travailler aussi avec une personne issue de domaines différents et est parvenue à proposer du contenu à travers des supports tels que three.js qui m'était complètement étranger. Ce projet est pour moi le premier pas et non pas des moindres pour de futurs projets encore plus grands dans le domaine de la 3D à travers les internets!

Image provenant du montage vidéo