Three.js Learning: Building Interactive 3D Experiences

Personal project · Jan 27, 2021 · Course stage

learning

stack: [three.js, webgl, learning]

Blender viewport with the portal scene and baked texture atlas prepared for Three.js. — Portal prototype scene setup in Blender, with UV layout and baked textures prepared before integrating the assets into Three.js.

Context

This project marks my learning stage with Bruno Simon's Three.js Journey, where I focused on understanding real-time 3D workflows for the web through practical scene building.

My role

Frontend development
3D modeling

I designed and developed the interactive prototypes, combining Three.js implementation with scene setup and frontend integration.

Data and methodology

I built multiple exercises and prototypes to practice cameras, materials, lights, and interactions in a browser-based 3D environment.

For the portal prototype, I used Blender to model all scene elements before integrating them into Three.js.

Key decisions

I kept the scope focused on learning-by-building, prioritizing fast iteration over production polish.
The farm prototype was prepared as an initial concept for a larger piece that was not ultimately published.

Result

The process produced two functional interactive prototypes and a solid technical foundation in Three.js and WebGL workflows.

Impact and learnings

This learning phase expanded my frontend capabilities into real-time 3D and opened new possibilities for future visual storytelling formats.

Links

View live project