weblive

3D Birthday Scene

Interactive 3D web experience with Three.js and Cloudflare CI/CD

✔ Three.js✔ CI/CD✔ Interactive 3D✔ Cloud Deploy

Problem

Creating a memorable, personalized digital gift requires 3D rendering in the browser with smooth loading UX for large asset files.

Solution

Built an interactive Three.js scene with GLTF/FBX model loading, progress-bar UX for large assets, mouse controls (orbit, zoom, pan), and automated Cloudflare Pages deployment via GitHub Actions.

Architecture

Vanilla JS modular architecture with separate loaders for GLTF and FBX, external CDN hosting for large models via GitHub Raw, and CI/CD pipeline for zero-config deployment.

Tech Stack

Three.js · JavaScript · GLTF/FBX · Cloudflare Pages · GitHub Actions

Challenges

• Large 3D model files causing slow initial load — solved with progress indicators • Normalizing vastly different model scales and positions in a single scene • Deploying static assets efficiently via GitHub Raw CDN

Result

Live interactive 3D scene with documented deployment pipeline and real screenshots, deployed automatically on every push.

A personal project that demonstrates web 3D skills and modern deployment practices.