Inspiration
Most travel/tourism websites just tell you a place is beautiful — a bullet list of "must-see attractions," a stock photo, a paragraph of copy. I wanted to flip that. Instead of describing the Great Wall or Zhangjiajie's floating peaks in words, we wanted people to feel like they were already there — floating above it, drifting through it — before they ever book a ticket. The idea for Celestia came from that one frustration: tourism sites sell you information, not experience. I wanted to sell the experience itself.
What it does
Celestia is a 3D interactive tourism website that lets you "fly" through China's most iconic landmarks — Zhangjiajie's Avatar-like sandstone pillars, the Great Wall at Mutianyu, the misty karst peaks of Guilin, and Shanghai's neon Pudong skyline. Instead of static pages, each destination opens into a cinematic, weightless 3D scene you can orbit, scroll through, and ascend — paired with real landmark photography, "sky moment" highlights, secret facts, and best-season info, so it's still genuinely useful for trip planning, not just eye candy.
How we built it
- React + Vite + Tailwind CSS for the app shell and UI
- Three.js / React Three Fiber for the 3D scenes — floating peaks, starfields, orbit camera controls, the "ascend" scroll interaction
- GSAP for scroll-triggered animation and transitions between sections
- Real photography sourced and paired with each 3D "digital twin" scene so users get both the authentic landmark and the imaginative, weightless version of it
- Sourced 3D assets/textures from Sketchfab, Poly Haven, and Blender Kit, with some custom tweaking in Blender
- Used AI pair-programming (Claude) to speed up boilerplate, debug Three.js quirks, and iterate on copy/microcopy fast within the one-week timeline
Challenges we ran into
- Performance vs. visual richness: 3D starfields, floating geometry, and orbit controls are gorgeous but expensive — balancing frame rate with visual density took a lot of tuning.
- Making 3D feel purposeful, not gimmicky: it's easy to add "3D for 3D's sake." The real challenge was tying every 3D moment to something emotional — awe, scale, motion — rather than just decoration.
- Beginner-level Three.js on a one-week clock: learning camera rigging, lighting, and scroll-linked animation while also designing and building the rest of the site was tight.
- Balancing real photography with 3D fantasy: making sure the "real landmark photography" and the stylized 3D scenes felt like one coherent world instead of two mismatched aesthetics.
Accomplishments that we're proud of
- Landing on a hero moment ("China Awaits. Weightless.") that actually delivers on the promise in the first five seconds
- Getting orbit-controlled 3D landmark scenes working smoothly as a Three.js beginner
- Keeping the site cohesive across four very different destinations (Zhangjiajie, Beijing, Guilin, Shanghai) with a consistent "weightless flight" visual language
- Building something that feels like a travel brand, not a hackathon prototype
What we learned
- How to choreograph camera movement and scroll position in Three.js/GSAP to create a sense of ascent and weightlessness
- That vivid experience beats vivid description — small details (an altitude readout, lat/long coordinates, a "sky moment" callout) do more to sell a place than another paragraph of marketing copy
- How to blend real photography with stylized 3D without breaking immersion
- A lot about performance optimization for WebGL scenes on a beginner's toolkit
What's next for Celestia
- Add more destinations (Xi'an, Chengdu, Yunnan) and let users build a full multi-city 3D itinerary
- Real booking/travel-planning integration so "Add to Plan" becomes an actual trip builder
- Mobile-optimized 3D scenes (touch-based orbit controls, lighter geometry)
- Sound design and ambient audio per landmark to deepen immersion
- User-generated "digital sky lanterns" as a shareable, social feature
- Multiplayer/shared "flight" mode so friends can explore a destination together before they travel
Log in or sign up for Devpost to join the conversation.