Orbit

Inspiration

If you look at almost every "3D car website" out there, they all start the exact same way: someone downloads or buys a 3D model, loads it into the browser, and sets up some lights. The 3D model does all the heavy lifting, and the website itself is basically just a wrapper. I wanted to completely invert that concept. I asked myself: what if the car is the code? I wanted to see if I could build a stunning, realistic 3D hypercar experience without relying on a single .glb, .obj, or texture file.

What it does

Orbit is a single-page, interactive 3D experience featuring a hypercar that is generated entirely by math in your browser the moment you load the page. Because the car is derived purely from code rather than a static asset file, it can do things a standard model can't. You can seamlessly morph it between a clay study, a structural wireframe, and a fully clear-coated render because it's re-evaluating the same mathematical surface, not just swapping out exported files. The site walks you through five chapters explaining its own construction, features a configurator for paints and finishes, and weighs basically nothing. No asset pipelines, no CDNs—just a few kilobytes of arithmetic.

How I built it

I built the experience using three.js, react-three-fiber, and vite. Instead of importing geometry, the car's shell is a mathematically lofted surface made of 264 cross-sections. Each section is a superellipse whose shape is dictated by four monotone cubic splines (controlling the roof, floor, width, and waistline).

To make it actually look like a car, I run the geometry through a few procedural passes. I apply a "crown" to drop the hood between the fenders, a "tumblehome" to curve the cabin glass inwards, and mathematically subtract the wheel arches from the hull. Even the studio lighting is pure code—I used Lightformer rectangles inside a procedural environment map to create those long, realistic reflection streaks down the car's clearcoat.

Challenges I ran into

Turning a mathematical tube into something that actually looks like a hypercar was incredibly tricky. Without my "crown" and "tumblehome" math passes, the baseline curves just give you something that looks like a sleek bar of soap or a pontoon.

Another massive headache was handling materials and panel gaps. When you don't have a UV-mapped 3D model, assigning materials (like glass for the canopy or carbon for the intakes) can easily result in jagged edges that tear across the generated triangle grid. I had to solve this by assigning materials in parameter space (u, θ) so the boundaries smoothly follow the generated curves. For the window seals, I actually had to trace trim tubes along the true curves to cleanly cover the quad boundaries!

Accomplishments that I'm proud of

I am incredibly proud that I actually pulled off a beautiful, realistic 3D car with zero downloaded geometry or textures. Shipping an entire vehicle and a professional lighting studio as a few kilobytes of logic feels like a huge win. I'm also really proud of the lighting setup—getting the reflections to break perfectly across the procedurally generated shoulder lines makes the car look like a tangible, sculpted object rather than a math equation.

What I learned

I learned a massive amount about procedural geometry and parameter space. I realized that while traditional asset pipelines (modeling in Blender, exporting, compressing, loading) are the industry standard for a reason, you can achieve an unbelievable level of fidelity directly in the browser if you're willing to dive deep into the math. I also learned how powerful React Three Fiber is for orchestrating complex, multi-stage procedural rendering.

What's next for Orbit

Since the entire car is driven by a handful of base curves, the natural next step is to let users manipulate those curves in real-time. I'd love to build out a full "garage" where you can grab control points and instantly stretch the car into an SUV, a racing prototype, or a grand tourer. I'm also looking into procedural environments that react dynamically to the car's generated shape, and potentially adding a feature to export the mathematically generated car into a standard .obj or .stl file for 3D printing.

Built With

• 3d
• css
• drei
• frontend
• generative
• html5
• javascript
• math
• postprocessing
• procedural-generation
• react
• react-three-fiber
• splines
• three.js
• typescript
• vite
• webgl