Room Three.js

Back to projects

Creation of a Three.js project following Bruno Simon's training. This project is personal and was undertaken to test my abilities with the Three.js technology after completing the entire training course.

Discover this project !
A 3D isometric view of a room with buttons on the left.

The concept

To challenge myself, I made the decision to follow the “Three.js Journey: The best way to learn Three.js” course by Bruno Simon. After completing the course, I decided to embark on my first project using Three.js. I initially planned to include it in my portfolio as a surprise for users exploring my workspace. However, I changed my mind due to a lack of coherence with my portfolio, which was primarily based on 2D illustrations, and the inclusion of a large 3D scene.

Two 3D computers on a white 3D desk.

Gallerie

Three posters on a white 3D shelf. A 3D artwork of Rembrandt created in 3D. A green 3D chair with a desk and computers.

The Steps in My Work

I started by sketching out my idea on paper to consolidate my concept. Then, I began creating my 3D scene in Maya Autodesk, applying textures I created in Substance Painter to my objects. I used various materials to construct this 3D scene. While not the most optimized approach, it was the quickest method for me. Next, I coded my room.js file in PhpStorm, installing Three.js and its dependencies, and importing my scene. I also implemented various interactive elements.

A white dresser with various items on top in 3D.

Room Three.js

Back to projects

Création d’un projet Three.js suite à la formation de Bruno Simon. Ce projet est personnel et a été réalisé dans l’optique de tester mes capacités avec la technologie Three.js suite à la formation que j'ai suivi dans son entièreté.

Discover this project !
Une chambre en 3D vue isométric avec des boutons à gauche.

Le concept

Pour m’expérimenter, j’ai pris la décision de suivre la formation “three.js journey The best way to learn Three.js” de Bruno Simon. À la suite de cette formation, j’ai décidé de réalisé mon premier projet en three.js. Je voulais l’inclure dans mon portfolio pour faire une surprise à l’utilisateur voulant découvrir mon espace de travail. J’ai changé d’avis suite à un gros manque de cohérence envers mon portfolio basé sur des illustrations en 2d et cette grande scène en 3d.

Deux ordinateurs réalisés en 3D sur un bureau blanc en 3D.

Gallerie

Trois posters sur un meuble blanc réalisé en 3D. Une oeuvre d'art en 3D de Rembrandt réalisé en 3D. Une chaise verte en 3D avec un bureau et des ordinateurs.

Les étapes de mon travail

Je suis tout d’abord passé par de petits schémas en version papier pour centraliser mon idée. J’ai ensuite commencer à réaliser ma scène en 3D sur Maya Autodesk, j’ai créé quelques textures sur substance painter que j’ai ensuite appliqué sur mes objets. J’ai utilisé par mal de matériaux pour réaliser cette scène en 3D. Ce n’est pas la façon la plus optimisé pour réalisé cela mais c’éait la méthode la plus rapide. J’ai ensuite codé sur PhpStorm mon fichier room.js tout en installant Three.js et ses dépendances pour ensuite importer ma scène et coder différents éléments d’interactions.

Une commode blanche avec différents éléments dessus en 3D