Route 66 turns 100 next year, so I spent a few weeks turning the whole road into something you can scroll: https://www.pit-stop-app.com/viz/route66
You start in Chicago and scroll to the Santa Monica pier. Free, no signup.
The three.js side, since that is what I would want to know:
The road is one curve. 2,287 lat/lon points projected through an Albers projection into world space, fed into a single CatmullRomCurve3. The asphalt is TubeGeometry at 4,200 segments, with a second fatter translucent tube around it for the glow. The dashed centre line is one LineSegments built by walking the curve in 2.6-mile steps.
The elevation is real. Every point is sampled against opentopodata's NED 10m dataset and cached to disk at build time, then exaggerated on the Y axis. That is why the Arizona high country and the Cajon Pass drop into San Bernardino actually read as terrain instead of a flat ribbon. Getting elevation right was the single biggest visual win and I made it into the build script to not hurt perfomance
No image assets at all. Four CanvasTextures generated at runtime cover the sky, the point sprite, and the small signage. No TextureLoader, no GLTFLoader, nothing to wait on. The whole page is 46 KB raw and 15.7 KB gzipped. The only real payload is a 398 KB JSON of the road and the towns.
Roughly 13 draw calls for the base scene. Towns are one Points cloud with a tiny custom shader so markers scale with distance instead of the default attenuation:
attribute float size;
void main() {
vec4 mv = modelViewMatrix * vec4(position, 1.0);
gl_PointSize = size * (240.0 / -mv.z);
gl_Position = projectionMatrix * mv;
}
Everything funnels into one number. Wheel, touch, arrow keys, and the progress bar at the bottom all write to scrollY, and one function maps that to a position along the curve. Once I stopped treating those as separate input paths the whole thing got simpler and the camera stopped fighting itself.
The thing that took longest was not rendering, it was the camera. Version 1 aimed at a single point 7 miles up the curve, which whipped on switchbacks. What shipped samples the road at 3, 6, 9 and 12 miles ahead, averages those, and eases the result over time. On the Oatman switchbacks in Arizona, the worst corner on the whole road, that took peak yaw from 13.4 deg/frame down to 8.0 and the average from 2.06 to 1.29.
I then tried full heading-based orientation with a hard turn-rate cap, thinking a cap would be strictly better than easing. It jittered, and I reverted it. Easing an averaged look-ahead beat clamping an exact heading, which was not what I expected going in.
Happy to go deeper on any of it. Curious what people do for scroll-driven camera work on a path this long, because I do not think I landed on the right answer.
