Video wird geladen...

Video konnte nicht geladen werden

Zur Startseite

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 Aufrufe • vor 1 Jahr •via X (Twitter)

12 Kommentare

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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:

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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 😃

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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 😜

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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.

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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

Profilbild von PowerBeatsVR
PowerBeatsVRvor 3 Jahren

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:

Profilbild von jordi
jordivor 1 Jahr

we got shopify driving game before gta 6

Profilbild von renderfiction
renderfictionvor 1 Jahr

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.

Profilbild von mrdoob
mrdoobvor 1 Jahr

Excellent! 😙👌

Profilbild von Alex Greenland
Alex Greenlandvor 1 Jahr

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

Profilbild von Daniel Beauchamp
Daniel Beauchampvor 1 Jahr

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

Ähnliche Videos