Loading video...
Video Failed to Load
Shopify just launched a racing game built in threejs and React (R3F). No physics libraries. No raycasts. Not vibe coded. But all vibes. ✨
1,420,048 views • 1 year ago •via X (Twitter)
12 Comments

It’s an easter egg inside our latest Editions page, and was handcrafted by @letkma , @maca_graphics and myself. With support from the Editions team @shopify You have to try it out:

No physics libraries? No raycasts? That's right! The track is a spline that lets us easily figure out the normals and tangents at any given point on the curve. This makes collision and twisting tracks simple and super performant. Reply if you want an in-depth break down 😃

The curve also makes it possible to do jumps and other more complex movements without worrying about rigidbody physics.

Almost everything is instanced, from the fish, to the bubbles, to confetti, camera flashes, etc.... That way we can have thousands of effects going on without breaking a sweat. It runs effortlessly at 120fps on desktop and 60fps on mobile. Oh and it's a React app 😜

Post processing with bloom was added in 1 line using react-postprocessing . It makes a world of difference to the overall look. It really shows the power of composability with react-three-fiber.

Now the question is, how fast can you complete it? I can't seem to get under 1:48 😉

VR fitness app PowerBeatsVR has just made its way to the official Meta Quest store! Grab it now and enjoy a fun workout anywhere, anytime, and without any subscription ever:

we got shopify driving game before gta 6

After playing this I realized 2 things: 1) I have a lot more to learn about #threejs. 2) I have a LOT more to learn about #threejs. Incredible game and flawless performance on my mobile device.

Excellent! 😙👌

So the car model is on a fixed spline while flying in the air too?

Yep! The visuals of the track are separate from the spline itself. So we can fake jumps by hiding parts of the road
