正在加载视频...

视频加载失败

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 次观看 • 1 年前 •via X (Twitter)

12 条评论

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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:

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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 😃

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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 😜

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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.

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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

PowerBeatsVR 的头像
PowerBeatsVR3 年前

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:

jordi 的头像
jordi1 年前

we got shopify driving game before gta 6

renderfiction 的头像
renderfiction1 年前

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.

mrdoob 的头像
mrdoob1 年前

Excellent! 😙👌

Alex Greenland 的头像
Alex Greenland1 年前

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

Daniel Beauchamp 的头像
Daniel Beauchamp1 年前

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

相关视频