Pedalscape

Sakura Crossing is an explorable Japanese suburban railway-crossing neighbourhood built as a real-time Three.js 3D scene and rendered to resemble a hand-painted, cel-shaded 2D anime background. The spherical town includes a railway, shopping street, shrine, school, library, residential areas, festival ground, hills and a drainage channel; users can walk, ride an e-bike, call a train, interact with vending machines and other objects, and orbit out to view the planet. Signs, lanterns and other facade details are drawn at runtime with Canvas2D rather than loaded as image assets, while the outlines use a screen-space second difference of depth instead of an edge filter. The repository runs with Node 18 or newer, Three.js and Vite, and provides development and production-serving commands.

Casa Serra is a scroll-driven interactive house visualization and work-in-progress web demo. It opens as a flat architectural floor plan, which is the actual Three.js 3D model viewed from above and cut at about 1.2 metres; scrolling raises the cut to form the walls and moves the camera through the rooms. Each room remains a line drawing until the camera reaches it, when materials appear. The scene uses geometry generated in code, GSAP ScrollTrigger and Lenis, plain files without a build step, and CC0 texture scans from Poly Haven. On devices that cannot run the real-time scene, it provides a still image and a video clip.

Cinematic Zoom is a browser-based three.js application that flies a camera from orbit to selected locations on Earth and records the movement as an MP4. Users choose a landmark or enter a name, coordinates, DMS coordinates, or a map link, then select a shot preset—Dive, Descent, Orbit, Flyby, or Hyperzoom—a lighting setup, and a duration. The camera's distance, bearing, pitch, lens, and roll each follow separate curves rather than a single interpolation, while the app positions the sun for the selected location and renders Google's photorealistic 3D tiles. The project is built on the three.js 3d-tiles-renderer, with tiles streamed through Cesium Ion and atmosphere and clouds supplied by @takram/three-geospatial. It requires Node 22.12 or newer for local development and a browser with WebGL 2; recording additionally requires WebCodecs with a hardware video encoder. A Cesium Ion token or a Google Maps Platform key with the Map Tiles API enabled is required, and the app stores the token in the browser.

MTL Explorer is a self-hosted GPS track and trail log for a personal computer, NAS, home lab, or server. It imports Garmin, GPX, and FIT tracks, displays thousands of activities on maps, calculates track statistics, replays routes with a cinematic 3D camera, and supports route planning through BRouter. The application is distributed as a Docker Compose stack with a Spring Boot backend, a Vue 3 and TypeScript progressive web app, an OpenAPI schema, and optional sidecars for BRouter, local vector maps, and GeoNames SQLite location search. It is licensed under AGPL-3.0-or-later, with a separate commercial license for users who do not want to comply with the AGPL terms.

Kage is an interactive five-chapter night walk through a Kyoto mountain temple, rendered live in Three.js and WebGL. As the page scrolls, a camera moves through procedurally constructed architecture, lantern light, fog, rain, drifting leaves, terrain, a vermilion moon, and a restrained bloom pipeline. Generated scene plates, alpha-preserving WebP foreground artwork, editorial typography, and section-specific fade and blur transitions are layered over the live 3D world. The project is a deliberately small static site contained in one HTML document, using a vendored Three.js r149 build without a package manager or build step. It includes chapter navigation, responsive mobile layout, reduced-motion behavior, and a custom cursor for precise pointer devices; it has no runtime network dependency. No license is granted for reuse or redistribution of the original Kage code or artwork, while the included Three.js runtime retains its MIT license notice.