4x4 Builder - Off Road Vehicle Configurator

https://4x4builder.com

4x4Builder is a feature-rich, browser-based 3D off-road vehicle configurator and driving simulator built with Three.js, React Three Fiber, and Drei, allowing enthusiasts to customize detailed 4x4 models (like Toyota 4Runner, Tacoma, Land Cruiser, Jeep Wrangler, and more) with options for suspension lifts, wheel/tire combos from real brands, paint colors, accessories, and more—then test drive their creation on infinite procedural terrain with realistic Rapier physics; it also includes multiplayer for real-time collaboration and VR/XR support with @react-three/xr, multiple camera angles, screenshot export, URL sharing of builds, and responsive controls for desktop/mobile.

Check out the live app at 4x4builder.com or view the source code on GitHub for an under the hood look.

21 Likes

Looks great! :slight_smile: What are you plans for this?
Suggestion… Add “enviroment” pulldown that changes the envo. map on the model. Nice to let users visualize what the car looks like in different lighting.

Thanks - I had thought about that but I’m not sure most users will understand the difference between different envmaps on their own - I also considered including an actual 3d environment, for example inside warehouse, outside in the mountains, in a desert, etc in addition to the corresponding envmap, which I may do at some point in the future.

Also plan to add aftermarket part addons for all vehicles (currently only available on the 3rd gen (1996-2002) 4Runner. My modeling skills aren’t great and I’m pretty slow though so that might take some time. Really need to team up with a good modeler.

Just updated this today with rapier physics. Use keyboard arrows to drive your vehicle around. Infinite terrain generation as well.

2 Likes

Got to working on this again and built out full online multiplayer, and VR/XR support.

I love it!

1 Like

Made stand-alone info pages for each vehicle with a cool camera transition into the full app which turned out pretty good!

here are some URL examples:

2011-2013 Toyota 4Runner

2007-2021 Toyota Tundra

J76 Toyota Land Cruiser

JKU Jeep Wrangler

2021+ Ford Bronco

Each “page” is fully dynamic and transitions seamlessly into the full app with your currently selected vehicle when you click “Start Building.” In reality, I faked the multi-page feel—each one is just a dynamic React component that appears conditionally based on the URL. From the full app, you can return to the info/overview page anytime by clicking the small info icon in the bottom right. This approach should also help search engines index each vehicle individually, which is usually tricky with pure Three.js apps since traditional “pages” don’t really exist. It’s my best shot at getting the best of both worlds: great SEO + a smooth, app-like experience.