Ghost Signal — Interactive 3D Showcase
An interactive 3D robot showcase built with Next.js and Three.js, featuring five cinematic worlds and equipment exploration.
- Next.js
- React
- Three.js
- React Three Fiber
- TypeScript
- Zustand
- CSS
A cinematic 3D web experience built with Next.js, Three.js, and React Three Fiber. Explore five robots, rotate their models, and discover their equipment across desktop and mobile.
Key Features
Tech Stack
Next.js
App Router, static page generation, route metadata, and production builds
React
Component-based interfaces and lifecycle management for interactive views
Three.js
WebGL rendering, GLB models, lighting, shadows, and skeletal animation
React Three Fiber
React integration for Three.js scenes and frame-by-frame updates
TypeScript
Typed character definitions, asset contracts, and transition states
Zustand
Shared state for character selection, equipment discovery, and scene transitions
CSS
Custom responsive layouts, angular frames, visual effects, and reduced-motion styles
Challenges & Learnings
Synchronizing Motion and Interaction
Character switching had to coordinate the current model’s exit, the next model’s loading, and its arrival without accepting stale requests. I separated transition state from frame-by-frame animation and projected equipment anchors into screen space so the interface could stay aligned with a moving character.
Delivering Heavy Assets Reliably
Local loading speed did not reflect the cost of transferring models over a real connection. I overlapped the requested model’s download with existing transitions, shared in-flight requests, canceled abandoned transfers, and introduced content-versioned URLs and bounded memory caching. Separately versioned image compression reduced image bytes by about 70% against the previous release.
Balancing Detail with Mobile Rendering
High-density mobile screens increase the cost of WebGL rendering, while aggressive resolution cuts can make models look blurred. I used pixel budgets and gradual quality adjustments with recovery, then checked model scale, ground contact, lighting, equipment alignment, and touch interactions on desktop and mobile.
Outcome
Ghost Signal launched as a complete first-version 3D showcase with five selectable characters and a consistent experience across desktop and mobile. It demonstrates my ability to bring visual direction, real-time graphics, interaction design, and frontend engineering together in a working product. The project also strengthened my approach to asset delivery, rendering budgets, and reversible releases, with image optimization isolated so visual quality could be reviewed independently.