Create Your First Project
Start adding your projects to your portfolio. Click on "Manage Projects" to get started
3D Singapore Parliament Interactive Explainer
Description
This project is a fully interactive scrollytelling piece that brings the Singapore Parliament chamber to life using Three.js, GLB models, and a custom scroll-driven animation system built in Svelte.
The experience blends 3D space, motion, narrative text, and inline videos with click-to-play / click-to-pause functionality. Readers explore the chamber as the story unfolds, moving through guided camera transitions and visual highlights that explain political dynamics and seating layout.
Date
Sep 2025
Link
Role
Responsible for the story and development, including:
-Writing the story and script
-Scene Engineering in Three.js
-Camera animation system (keyframes, easing, transitions)
-Scroll-driven choreography of 3D and text
-Video components with click-to-play/pause interactions
-Performance optimisations across WebGL + inline videos
Problem statement
Political reporting is often text-heavy, and the spatial layout of Parliament is hard to visualise. We needed an experience that clearly explains the chamber layout, shows where parties and MPs sit and walks the reader through key debate moments.
Key Features
1. Three.js Scene & Camera System
I built a full Three.js pipeline:
-Imported and optimised the GLB model
-Positioned lights, shadow settings, renderer configuration
-Placed multiple virtual camera “stations”
-Created smooth transitions with custom easing curves
Built a keyframe-based timing system to sync with scroll position
2. Scroll-Driven Chapter System
Each section of the article corresponds to a “scene”:
-Introduction – Entering the chamber
-Understanding the layout
-Party-by-party seat breakdown
-Viewing specific debate locations
-Closing zoom-out and context
-Scrolling triggers camera movements, object highlights, and reactive overlays.
3. Inline Video Moments (Click to Play / Pause)
To explain debates and context, I integrated a reusable video component with:
-Tap/click anywhere → toggle play/pause
-Auto-pause when out of viewport
-Custom play button and subtle overlays
-Lazy-loaded videos to reduce initial page weight
-Videos provide editorial depth without overwhelming the WebGL scene.
4. Interactive Highlights
-Seat clusters illuminated based on chapter
-Selective spotlighting to guide viewer attention
-On-hover/tap tooltips for MP groups or sections of the chamber
5. Performance Optimisation
-GLB decimation + texture compression
-Efficient draw calls via material instancing
-Throttled scroll listeners
-Mobile-optimized renderer settings
-Video autoplay disabled to avoid CPU spikes
