MarioKart.js Blew My Mind (Open Source + React + ThreeJS)

I've been hyped about this one for awhile. Big React-three-fiber simp so I hope that makes sense. React, ThreeJS and all the tech around it might not be the most common choice for game dev compared to Unity, Unreal Engine, Phasor, etc, but that kinda makes this cooler imo.
SOURCES
/ 1757407914900242724
github.com/Lunakepio/Mario-Ka...
MY PREV R3F VIDS
• React Wasn't Built For...
• 3D GAMES in JAVASCRIPT??!
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

[@z_0968]

Nintendo is 100% going to DMCA this if/when they find out. My advice take a page from Palworld, instead of calling it MarioKart, with Mario the iconic Italian plumber. You call MasayoshiKart, and make him a japanese electrician.

[@BooleanDev]

yeah, it was extremely dumb to use the mario kart name. its basically begging Nintendo to send a dmca

[@1234minecraft5678]

Idk why ppl think they would cone thru. Maybe he wants the fuzz and changes it after dmca

[@BooleanDev]

@@1234minecraft5678 if the dmca demands you shut it down, changing the name isnt gonna get you out of it

[@eveykhan]

Palrio Kart 🤝

[@ermilburn02]

@@1234minecraft5678 Yes, because we saw how well that worked with Mario Royale

[@anttihilja]

Nintendo will take this down faster than theo can say he doesn't like Remix :)

[@gilgamesh9735]

*Flutter

[@toparamennoodles9652]

Remix sucks lol

[@anttihilja]

@@toparamennoodles9652 Shut up, Remix is great

[@wlockuz4467]

I think they have a bigger fish to fry at the moment, Yuzu.

[@mohammadalrefaai4377]

After 10y, React for quantum physics

[@spageen]

Can react fix my broken marriage?

[@t3dotgg]

Only if it can render to canvas

[@svict4]

Render me like one of your french girls

[@erifetim]

Can you try to hot reload?

[@boomshakalaka656]

Yes the compiler can

[@jaspreetmaan121]

Maybe your component didn't mount

[@seb4690]

Missed opportunity to say, "MarioKart.js in the Bowser"

[@FroztYcle4737]

ha

[@Comrade_Santos]

I believe we're on the cusp of a new "flash games" kinda of era

[@seeibe]

Wasn't that the .io games?

[@ADarnSmore]

3d browser games have been a thing for a while. this is just worse.

[@Raidar29]

@@ADarnSmore why is this worse?

[@shomriddhosworld5587]

After 20y, A Os Built With React

[@t3dotgg]

jQuery is getting an operating system soon so this checks out timeline wise (more context coming soon)

[@VivekYadav-ds8oz]

​@@t3dotggW H A T

[@xetera]

Hey reactOS technically already exists

[@lordbeerus9532]

​@@t3dotgg whaaat ? How? When ? Where ?

[@user-gs3lm7gt5e]

m.kzbin.info/www/bejne/gH3KpJyFgM2tb7M This guy is a genius

[@ivanrenescorcia]

ThreeJS is really powerful, we should give it more visibility!

[@johnmagbag2711]

Didn't expect I'd be a game dev in 11 minutes.

[@IHighscoredYourGirl]

Don't worry, you won't

[@Iamfafafel]

@@IHighscoredYourGirl 😂

[@J3R3MI6]

@@IHighscoredYourGirlyou’re right… with AI it will take 5 mins

[@cherubin7th]

That this changes show up in the game imminently was so awesome. I just had to tried this in Godot too, and it does this too. I didn't know that.

[@alskidan]

I adore watching JS developers rediscovering scene graphs :-D

[@mieszkogulinski168]

Uaing React to create any type of graph, not only HTML, is actually an awesome idea

[@dshappir]

It's always worthwhile remembering that React JSX nesting is just functional composition.

[@KaroLiul]

Everything that can be written in javascript, will be written in javascript

[@James.Engineer]

Amazing open source idea!

[@joshbedo8291]

You can even take this a step further and run it in XR so you can play it on a quest in virtual reality. Could even add a new camera mode for VR so you are in the driver seat and can throw items 😄

[@matt1988ish]

I'd love a polished game engine made out of this. As someone who dabbled in game dev for over a decade, I could get behind this architecture for small projects.

[@Hapkumdo]

Drei is german for Three - the more you know.... xD

[@tangrumser8984]

Zustand is also German for State. It’s super weird to hear non German speakers pronounce it like it’s just an English word 😄

[@markflakezCG]

"zsuständ" xd

[@EvanEdrok]

So it’s react-three-three?

[@minhuang8848]

@@tangrumser8984 thank God he showed the word, I would never in a million years made the leap susstend

[@tanvirhasan4912]

Nintendo would arm themselves with lawyers to go after 8 year olds pirating pokemon.

[@wlockuz4467]

Finally some good content that isn't about reinventing the same thing or AI. Really enjoyed this one, threejs never fails to blow my mind.

[@SteelSkin667]

I mean this is about reinventing the same thing, the novelty is that it's built with React.

[@wlockuz4467]

@@SteelSkin667 I was mainly talking about how JS frameworks have been lately lol

[@mieszkogulinski168]

Long time ago I made a project at work that uses react-three/fiber to display visualizations of scientific data. react-three/fiber is awesome, the idea of displaying 3D object as React components is great

[@rotoozeki]

Clear explanation👏 Didn’t understand everything cuz I’m not familiar with coding but I was enjoyed hearing your explanation.

[@FrostsorrowGaming]

this is a like a new era of "flash" style games. Yea i know its way more powerful then flash, but it was the only other thing that came to mind when it comes to browser based gaming that did have some neat games for its time out there. Having full 3D space and running so smoothly is pretty great. Also the openness of it is great as well.

[@user-rp7nt1gi2i]

Nintendo should be proud of this fan as he made mario kart for the browser

[@AndersonMancini]

Funny to see my face and name during your code review 😅. I just worked with Fire glsl Shader but looks like I changed a lot of other things.

[@EEBDivyanshgupta]

I once read an article or something that riot games uses react to display splash screens in there games(ig it was about Valorant). Crazy to think about the potential React has!!!!

[@seeibe]

What incredible timing for this video 😂

[@ElLevidente]

Feel like it would be a lot more accurate just to say it's made with Three.JS -- React-three-fiber is really just a wrapper to provide Reacts delcarative syntax and components structure for Three

[@jerondiovis6128]

Is this guy already in jail because Nintendo lawyers saw this?

[@ewwitsantonio]

I love R3F. Working on a few R3F jobs right now. Super fun to work with.

[@Roboprogs]

Trivia regarding long ternary operator chains: format them like else-if’s. Cuz that’s what they are. See also: (COND …) in Lisp, or if/else/… in Ruby.

[@tgoyer]

I always thought of them more like complicated switch statements. But yeah, "if" is probably a better mental model.

[@mcgjk]

What VSCode theme is that? It looks nice :)

[@user-vo1wt7hj1w]

What's your VS code setup? Can you share? It's neat and I like it.

[@BennyS6502]

Very impressive and a great showcase for React-three-fiber! To be fair though, this has nothing to do with React being fast or slow. At the end of the day, the whole thing is rendered in a canvas element on the GPU using WebGL. As you said in the video, React-three-fiber is a wrapper around Three.js, which is a wrapper around WebGL. However, the level of abstraction and ease of use makes React-three-fiber a good choice if you want to be productive. 3D programming is hard...

[@theavazov]

I like the idea of recreating the most lovely games from our childhood, good thing is on browser)

[@tormado]

OH GOD IT'S ALL COMING TOGETHER 🤯

[@ricky2629]

Could something like this get used with Electron to make it behave more like a game with it's standalone executable?

[@mattmmilli8287]

Yes. Many 2D games on steam are really headless browser games

[@TheMASTERshadows]

Now do it with htmx

[@smthngsmthngsmthngdarkside]

Please leave the internet

[@benheidemann3836]

I think a game engine built around React would be really cool and very approachable for a lot of web devs. Does something like this exist already?

[@shafiq_ramli]

JS ftw 🎉

[@chrislanejones]

I am in the process of learing Three.js, this is great, I wonder if they used Spline library to create it.

[@LajosHarangi]

Nintendo's lawyers are writing the DMCA as we speak.

[@tvwithtiffani]

I can attest to Zustand being a good react state library to work with. increases confidence.

[@finn3163]

btw "zustand" translates to state from German, so that might make it a little more clear to understand

[@KnOtoUt]

I had done some three with vanilla js when I was on a hackthon for Space Apps, It was a 3d scene to show eclipse. Didn't win anything but being able to make a browser 3d scene when I didn't even know js well tells me it is easy to get into but damn it is hard to master

[@callibor3119]

We need more open source projects to help us with language learning, programming language learning and help with basic living, even. Open source is the public domain of the internet and we need all the free things we need ti bring happiness abd unity back into our lives.

[@usame.cetinkaya]

It's important for children to know how the physics works. Well said.

[@AnnasVirtual]

react component as objects? that's fun that's interesting that they can do SceneGraph with react components usually you do scene.AddChild(new ItemBox(position = new Vector3(1, 2, 3)));

[@molesarecoming]

you do that with the dom as well: node.appendChild(createElement("div)). react expresses imperative systems declaratively. that's why react-dom is not named react-html, it is merely a form that instructs react about the dom: divs, spans, appendChild, insertChild etc. react-three-fiber is the same for threejs, a small form that instructs react about the platform. react itself remains platform independent.

[@Nekroido]

Nintendo's nukes the project in 3... 2... 1...

[@idoblenderstuffs]

the link on it is broken and i cant seem to find an upload of it

[@hjewkes]

Damn I just expected this to be an emscripten recompile

[@DevGio]

"Devin, make Mario Kart 9 from Threejs and Reactjs"

[@geralddd.g]

What theme are you using on vs code?

[@xtanion]

++

[@callibor3119]

We need everything free that we can safely get to help us with basic living. We needed an open source-based community since the internet became so popular around the globe. I’m tired of prices on the internet being so expensive than when you are getting groceries. You don’t need a live service to groceries and cook your own foods.

[@AScribblingTurtle]

While the tech is impressive, it is unfortunate they didn't adapt something like Super Tux Kart instead. Nintendo will kill this inspiring thing before you know it. They went after someone remaking a terrible 30-year-old game, that barely anyone cared about, what makes you think remaking one of their greatest cash cows would be handled with less vigor? Heck, if the Devs would have gone for a Sonic variant, they may would have even gotten a Job from Sega. Now all this will get them is a DMCA Takedown, And we all lose yet another cool piece of tech.

[@aleksd286]

So we all just became game developers overnight

[@STaSHZILLA420]

Pokemon Revolution Online (fan-made pokemon mmo) made all their stuff from scratch. As a result, they can't be stopped. The same thing can happen here if they alter the name a bit.

[@abdelazizlaissaoui9079]

a good example to use react instead of htmx

[@hgeldenhuys]

This is super cool

[@Meaticus22]

Newb question: How did you get the react program to run via terminal and not browser?

[@mieszkogulinski168]

There's a library named Ink that allows using React to build CLIs

[@Meaticus22]

thank u@@mieszkogulinski168

[@Meaticus22]

wait but how did he get the mario kart program to run via terminal instead of the browser? @@mieszkogulinski168

[@randerins]

Oh nice, just like playing it on Yuzu 🙂

[@anurag476]

Theo - camera as an object is a very common construct in most game dev languages (or engines?) - gamemaker studio, unity, unreal, etc all have cameras as controllable objects that you can program. But yeah, seeing it in a web dev project is quite refreshing

[@tehArgento]

Well, everybody fork it before it gets taken down XD

[@LanceBryantGrigg]

This is legit proof that eventually everything will be written with Javascript.

[@rollinOnCode]

that is hilariously awesome

[@ifscho]

So can I write a whole game and somehow compile it to a Steam deliverable? 😄(Into a native build I mean, obviously could just run it in a WebView.)

[@Destide]

RIP the dev enjoy the Donkey Kong themed salt mines

[@apptsx]

What font does theo uses in VSCODE? 3:40

[@DeusEx3]

Yes, Nintendo, this video right here.

[@ua420]

❤Amazing🎉

[@UnitCodesChannel]

Nintendo right now: Call The Lawyers

[@pauloeduardo1461]

In Bowser!

[@shujaa]

I don't know if @theo has heard of the new "dom in canvas" package by the pmndrs team 🤔. Game dev in react is about to explode.

[@igoralmeida9136]

does this use WebGL or WebGPU?

[@liquidsnake6879]

It's Three.js, so WebGL

[@lancemarchetti8673]

Very cool!

[@fayenotfaye]

Which browser do you use

[@pwall]

something totally almost unrelated but it would be very cool if you could do a video on version fox (vfox) very cool go project for managing utils versions, the plugins are written in lua.

[@Gahlfe123]

i fucking love this

[@marcpanther8515]

Is my assessment correct: things still look clean and declarative because most of the game logic is probably in another repo? This feels like just "initialization" codes for the game.

[@sayakghosh9247]

Nintento Legal team gonna be all over it now :)

[@MaisieSqueak]

Well I'm sure this with do wonders for Nintendo's already smashed street cred. Going for the low hanging fruit I guess.

[@UnitCodesChannel]

Nintendo: Hold my Lawsuit

[@aeronwolfe7072]

SO cool

[@deadcrypt]

New age of “flash” games?

[@ParthaSarathylink]

Incoming ninento lawyers in 3..2..

[@IHighscoredYourGirl]

Let's talk after you've added collision detection

[@Fanaro]

Imagine this in SolidJS...

[@neociber24]

Is using the canvas, I don't think it will make much different

[@tvwithtiffani]

This would be a great time for Nintendo to allow a single pass in this instance. This project is much more than M***o K***

[@im9yro178]

2050 : react phone

[@totalpr0st]

zustand es heißt ZUSTAND.. good video and very cool project tho

[@abui6914]

bet you can build time travel machine using react in future

[@wlockuz4467]

I can't wait until people optimize the heck out of it.

[@kyanhluong]

Great job Now quick !, archive this page

[@DrJohn123]

Fables of Faubus

[@MrSongib]

Better than Roller coaster Excel. xd

[@netking767]

#wow!

[@LiberaMeFromH]

Nintendo getting ready to lawyer up

[@Cohors1316]

Cloning this and backing up offline before it gets DMCAd to hell.

[@Oscaragious]

Does this make React a game engine?

[@user-uc5ow2rd9o]

can't wait to nintendo lawyers to sue all of the development team

[@patrickdevaney3361]

This is really cool. But I think it would be more practical to do Rust and WASM for a browser game.