3D Portfolio

Inspiration

I wanted to build a portfolio that felt like more than a collection of links and screenshots. Traditional portfolio websites are useful, but I wanted the experience itself to communicate my interest in 3D design, technology, and interactive experiences.

The idea was to create a small virtual room that represents me — a space where different objects become gateways to different parts of my work. Instead of simply clicking a navigation bar, visitors can explore the environment and discover projects naturally.

How I Built It

I created the environment in Blender, designing a personal workspace containing objects such as a desk, laptop, books, drawers, lighting, and other details.

The 3D environment was then exported as a GLB model and integrated into a web application using Three.js and Vite.

The website uses:

Blender for 3D modelling, materials, lighting, and animations
Three.js for rendering and interaction
GLTFLoader for loading the Blender environment
OrbitControls for camera rotation, zooming, and navigation
Raycasting for detecting objects that the user clicks
Three.js AnimationMixer for playing animations created in Blender
JavaScript, HTML, and CSS for the interactive portfolio experience

Interactive objects are designed to respond when the user hovers over them and can trigger animations, camera movements, and project information.

Challenges

One of the biggest challenges was getting the lighting from Blender to behave correctly in the browser.

The lighting that looked natural in Blender became extremely overexposed or disappeared completely after exporting the GLB. Different types of lights also behaved differently in Three.js, particularly the laptop light, desk lamp, and window light.

Instead of completely rebuilding the scene, I experimented with Three.js lighting and replacement lights while trying to preserve the original mood of the Blender environment.

Another challenge was getting Blender animations to work correctly on the web. I had to identify the animation clips inside the GLB and connect them to specific interactions, such as opening a drawer or a book.

Camera interaction was another part I had to experiment with. I wanted visitors to retain the freedom to explore the room while also having cinematic camera movements when interacting with important objects.

What I Learned

This project taught me how different 3D technologies fit together in a web environment. I learned how to take an asset created in Blender and turn it into an interactive experience using Three.js.

More importantly, I learned that creating a 3D web experience is not simply about making a model look good. Lighting, camera movement, performance, interaction, animations, and user experience all have to work together.

I also learned a lot through debugging. Several parts of the project initially failed — including lighting, animations, object interaction, and camera controls — but solving those problems helped me understand what was actually happening between Blender and the browser.

The Goal

The goal of this project is to make exploring a portfolio feel like exploring a space.

Rather than asking visitors to scroll through a conventional website, I want them to interact with the environment, discover projects, and gradually learn more about the person behind it.