Helmet Showcase

Interactive 3D Web Integration with Blender & Three.js
My Role
Full Stack Developer
3D Web Development (WebGL)
Teammate
Tools
Three js
Blendar
HTML
CSS
Timeline
2024
Overview

The Helmet Showcase was a pivotal self-initiated training project where I explored the integration of 3D Blender models into a live, interactive website using Three.js. At a time when immersive web experiences were still an emerging concept, this project pushed me out of my comfort zone and introduced me to the idea of spatial interfaces where UI and storytelling converge in a 3D environment.

My goal was to understand not just how to render a 3D asset, but how to overlay interactive HTML elements that tracked in-scene positions—adding contextual tooltips, spatial transitions, and hover-triggered details. This level of detail and spatial coordination demanded deep understanding of camera projection, raycasting, DOM transformations, and event logic. What started as a simple curiosity became a hands-on gateway to immersive web design and expanded my confidence in building future-forward user experiences.

Live Project

Problem

Helmet Showcase

Design Strategy

Technical Approach & System Flow

Registration & Approval

Members begin by registering through a custom-designed Divi form, which is captured by MemberPress. Each submission is held in review, pending admin approval via the New User Approve plugin.

Technical Application

Summary