My thoughts on the journey so far, the pains of 3D in the web, and if my project is on-track to succeed.
How is the journey so far?
So the above picture kind of summarizes my journey so far – going from frustration to contentment. I started off this second sprint with a fully completed 3D room in Blender, so my first task was to test if I could translate that to the web. Well as soon as I got my Three.js code working, I ran the code and watched as the errors fill my console log. I had completely forgotten that in order to use assets from Blender in the web almost everything needs to be “**baked” first!
**Baking, in general, is the act of pre-computing something in order to speed up some other process later down the line. (From the Blender docs)
I had been throwing all sorts of free assets into that room without a care in the world. With each pre-made asset comes multiple texture maps (between 3 – 6) and potentially millions of new polygons the scene now has to render! So, I had to go back to the drawing board, scrapping everything I had done so far and restarting with a simple room – just some walls and a table. I threw that into the demo file I had created and it worked! Now came the task of implementing that demo into our teams repo, but there was only one problem…it was in React. Now I thought this would be a relatively trivial task, especially with the help of ChatGPT by my side. The problem is that I needed to use React Three Fiber, which launched in 2019, so many of it’s updates and improvements happened after the cutoff date for the GPT tools. This meant I had to rewrite the entire code from the ground up as components and rethink some of the tricks I had used in Three.js.
For example, there is a controller for the camera called “Orbit Controls” that allows the user to pan and rotate around the screen with their mouse. In Three.js, I could set a hard-coded camera position to look at a table on-click by just overriding the current camera. In R3F, the Orbit Controls are consistently being updated, so any camera changes will be overridden. To fix this, every time a click event is initiated I have it check if something relevant has been clicked, and if so, it will temporarily disable the Orbit Controls, then set the camera. This was a relatively simple fix, but it was one of many.
Do you feel your project is on-track to succeed? If not, what do you plan to do to help the team get back on track?
All that being said, it probably seems like the project is doomed for failure. In fact, I am more optimistic than ever that this project is on the right track. The hardest part was getting everything set up in the repo and working on the web. Now that’s out of the way the rest is easy(ish)! I have animations, click-events, camera controls, overlays, and pretty much everything I thought we would need for a fully functioning escape room working. All that’s left now is filling out the room with objects, adding the necessary interactions, and refining as much as we have time for. I’m confident that my team will be able to complete one, solid room. If we can complete 2 or even 3, I would be overjoyed.
Leave a Reply