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.

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.

The Challenge I Set for Myself

For this project, I challenged myself to use Maya Autodesk instead of Blender. The most difficult part was getting my code to work with a scene imported from Maya Autodesk. There were very few online resources available, so I had to figure things out on my own and experiment with different approaches.

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

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.

The Difficulties I Faced

Following the entire course proved challenging, as there were many concepts I had never encountered before. The most difficult aspect was getting familiar with Blender. Since I had learned Maya Autodesk during my studies, I decided to adapt the code to allow me to use Maya Autodesk with Three.js instead.

A green 3D chair with a desk and computers.