ThreeJS
Blender
Webpack
Node.js
Overview
Bras Basah Complex merchants wanted an interactive floor map for their website. Inspired by Temasek Polytechnic's website which features a 3D interactive map, I wanted to try building something similar — and since I had always wanted to get into 3D modelling, I took it upon myself to explore this as a proof of concept using Blender and Three.js.
However, after reflection, I concluded that a 3D navigation experience would likely overcomplicate things for the average visitor, and wasn't the right fit for a directory site like Bras Basah Complex.
Features
- 3D floor map of Bras Basah Complex modeled in Blender (incomplete floor plan)
- Hover over any store to view its details and information
- Navigate the map freely using your mouse to move and look around
- A debug GUI included for development and testing purposes
Challenges
The biggest challenge was learning Blender from scratch, which took up a significant amount of time. On top of that, with limited time allocated for a proof of concept, performance and optimization had to take a back seat — though given the scope, that was an acceptable trade-off.
Reflection
It was a genuinely enjoyable project — diving into Blender and Three.js for the first time was a great experience. Even though it didn't make it into the final product, I have no regrets. Picking up these tools was rewarding in itself, and the skills I gained along the way made it worthwhile.
Screenshots