Services
3D Web Dev
Client
Tour East
Year
2023
Links
https://toureast.xctualyfe.com/
The Story
Tour East is an immersive 3D web experience that transforms how users explore Singapore's iconic landmarks. Instead of traditional scrolling websites, visitors navigate a vibrant 3D world where the city's attractions come alive through interactive storytelling. Users can zoom into famous sites like the Merlion and Marina Bay, discover hidden details through dynamic spotlights, and seamlessly travel between locations using spline-based camera movements.
As the creative developer, I built the entire 3D environment using React Three Fiber, implementing smooth camera transitions, interactive landmark systems with hover effects, responsive design that adapts across all devices, and engaging animations that capture attention from the welcoming landing page to the final destination.
This interactive tourism platform was developed for Tour East in 2024. Built with React, Three.js, and React Three Fiber using TypeScript, my work included 3D scene development, spline-based camera navigation, interactive landmark spotlights and zoom features, welcome page animations, responsive layout design, and performance optimization for all devices.
The Concept
The experience focused on exploration, immersion, and fluidity. I designed a spline-based navigation system for cinematic transitions between landmarks. Interactive spotlights illuminate on hover, revealing details and information. The zoom system allows intimate views of Singapore's architecture. The welcome page establishes immediate immersion through dynamic animations. Responsive design and performance optimizations ensure smooth experiences across all devices, transforming Singapore exploration into navigating a living, interactive world.
The Brief
Create an engaging 3D web experience showcasing Singapore's destinations through natural exploration. Requirements included smooth camera movements along predefined paths, interactive landmarks revealing details on hover, zoom functionality for closer inspection, responsive design across devices, and an immersive welcome sequence.
