Axis project cover

Axis

Premium 3D character showcase with studio-quality lighting

Live Demo
Role
Lead Creative Developer
Timeline
Q1 2025
Category
3D Production & WebGL
Context
Interactive showcase for ultra-realistic studio lighting models
60 stableWebGL FPS
1.2 MBAsset Size
320 msLoad Time

About this project

Axis is a premium 3D character showcase featuring studio-quality lighting and cinematic presentation. Built with Three.js and React, it presents futuristic AI robot models (RO-Y series) in an immersive interactive environment. The site features smooth scroll-driven animations, dynamic camera angles, a custom physics-based lighting system, and a bold typographic design system using Orbitron. Deployed on Cloudflare Pages for edge performance.

Tech Stack

ReactThree.jsViteGSAPCloudflare Pages

The Challenge

Achieving premium studio-quality realistic shadow and lighting rendering on low-powered mobile devices while maintaining perfect frame rates.

The Solution

Developed a custom baking pipeline for shadow-maps, custom low-poly shaders, and offloaded complex lighting equations to a customized shader pipeline.

Core Engineering Features

  • Immersive Three.js dynamic environment
  • Physics-based custom shader lighting equations
  • Smooth scroll-driven dynamic camera transitions
  • Edge-optimized asset hosting with high fidelity