Novaux Offfice

• 

  Novaux Wall Frame

• 

  Novaux Office

• 

  Coffee Table

• 

  Showreel

• 

  Play Radio

• 

  Localhost

Inspiration

Novaux Office was inspired by creative studios, digital workspaces, and interactive portfolio experiences. The goal was to turn a traditional portfolio into an immersive 3D environment that visitors can explore naturally.

What it does

Novaux Office lets users explore a virtual creative studio in first-person view. Visitors can walk around the room, inspect objects, view the showreel, explore dual monitors, interact with a vintage radio, and control the studio lighting.

How I built it

I built the project with React, TypeScript, Vite, Three.js, React Three Fiber, and React Three Drei. I used GLTF 3D models, custom lighting, textures, first-person camera controls, raycast-based interactions, and HTML overlays. The radio feature uses the HTML5 Audio API and HLS.js for live streaming support.

Challenges I ran into

The main challenges were optimizing 3D assets, creating smooth first-person movement, making object interactions feel natural, handling pointer lock behavior, and supporting different radio stream formats. I also had to balance visual quality and performance in the browser.

Accomplishments that I'm proud of

I am proud of creating a fully interactive 3D studio that combines a portfolio, workspace, live radio player, lighting controls, and interactive objects in one experience. The project feels more like exploring a real creative office than browsing a traditional website.

What I learned

I learned how to build interactive 3D environments for the web, work with React Three Fiber, load and position GLTF assets, create raycast interactions, manage browser audio streams, and improve performance in a real-time WebGL application.

What's next for Novaux Offfice

Next, I plan to add more interactive rooms, improve mobile controls, add more studio activities, optimize loading performance, expand the live radio system, and introduce more portfolio content inside the 3D environment.

Built With

• glb
• hls.js
• html5
• monacoeditor
• motion
• netlify
• react
• reacthreefiber
• three.js
• typescript
• vite
• webgl