3D Gallery with ThreeJS for CollecOnline

Context

The goal of this short project was to build an online 3D gallery for CollecOnline.

CollecOnline is a French company that specializes in inventoring personnal collections, such as Stamps, NFTs, Comics, etc, pretty much anything a user can collect, can be inventored by CollecOnline.

To extend on the inventoring feature, they wanted me to build a feature where the user can access a virtual gallery of any collection to experience it like they would in a museum.

Tech choice

The requirements for this project was that it needed to be built around ThreeJS. At the time of this mission, I just discovered ThreeJS and fell in love with it, but I still hadn't had much professional experience with ThreeJS so it was a perfect opportunity to sharpen my skills.

One issue that I previously had with ThreeJS is that if you are not careful with the structure of your code, you can sometimes end up with a single unstructured file.

So in order to deliver a clean, structured and therefore maintainable code, I built this project fully Object-Oriented.

I also used TypeScript which is a must have for any modern JavaScript project.

Challenges

The feature for which I had the most fun coming up with a creative solution was the placement of the artworks on the walls of the room.

The first method I tried was detecting all the walls of the room by finding the all the surfaces of the mesh that were vertical and had a certain amount of length.
Once I had the position of all the walls, I could determine the number of artwork that could fit on each of them based on the size of the artworks and the minimum gap between each piece.

That solution worked well with a simple gallery model and I was able to reliably fill it.

However, once I started using a more complex scene, things didn't work so well.
First of, the walls were not always blank slabs: They had windows (from where you could enjoy a beautiful view of the sky-box). And it was therefore much harder to programmatically define which surfaces were a wall and which were not.
The second issue is related to the first one, and came in the form of a new requirement: We might not want to have artworks on every available walls.
CollecOnline wanted to be able to more carefully craft each gallery, so it was decided that each walls may or may not have artworks on them, and they may or may not have the same gap between the artworks.

Solution

The solution I came up with was giving the ability to individually define the sections of walls on which the artworks will be displayed.
The user will define the start coordinates, end coordinates, height and gap of each wall section where they want artworks to be on.

For that I created a debug entry point in the application, that would allow the user to navigate in the gallery and click on walls to retrieve coordinates of the clicked point. Those start and end coordinates can then be added to the configuration file, along with the other section settings.
This enabled them to define more precisely the placement of artworks, allowing greater flexibility, without going all the way and having to define all the artwork slots manually.

This approach worked great, and despite requiring an initial manual setup for each scene, was praised for being more flexible and for allowing more artistic freedom.

Going further

Given more time, I would improve the configuration process by moving it outside of the project’s codebase. Currently, the configuration for each scene and the positions of wall sections are stored in a JSON file.

A future enhancement could involve integrating a CMS like Sanity, making it easier to create new scenes, upload 3D models, and configure wall sections in a more user-friendly interface.