3D GAMES in JAVASCRIPT??!

React is cool. Videogames are cooler. React. Javascript. Game. Development. What isn't there to love???
Check out React Three Fiber: docs.pmnd.rs/react-three-fiber
ALL MY CONTENT IS FILMED LIVE ON TWITCH AT / theo
ALL MY BEST MEMES ARE ON TWITTER FIRST / t3dotgg
ALL THE COOLEST PEOPLE ARE IN MY DISCORD t3.gg/discord
ALL MY VIDEOS ARE POSTED EARLY ON PATREON / t3dotgg
Everything else (instagram, tiktok, blog): t3.gg/links
THANK YOU MIR FOR THE EDIT!!!!!

[@benaloney]

That flexbox example was a massive flex 💪

[@rumplstiltztinkerstein]

I'm not a veteran of theo's channel. Has he covered spline? I think it's really interesting as well. Would be curious to hear his thoughts on it.

[@jshstuff]

I love that you're reaching into these other niches. I recently have been exploring the Web Audio API, and am beginning to make my own synths/FX. Given your background I'd love to see some content like this, but instead with audio things.

[@noirnerd]

Been messing with A-Frame, three js, React three fiber and Playcanvas for a few years, well further back, and its an exciting space to work in. At the min I'm working on an open source engine for creating adventure games with minimal config. Should work in VR, Desktop and mobile and eventually VR. it's still a work in progress but the exciting thing about doing 3D JavaScript dev work is you have to really think about EVERYTHING. It definitely suits visual thinkers and tinkerers who love experimental coding like myself, I basically went from FT react development to work in it for the last few years, at the min trying to catch up with React world lol.

[@xylvnking]

I'm a new dev but have a 3D background. First thing I did was make a project with react three fiber.

[@waficjazzar2655]

ahh shit i need more time in my life to play with this

[@xan3xx443]

I was legit asking this question 3 days ago. Theo is a legend always few steps ahead

[@snappyguy3899]

I've been waiting for you to cover react-three-fiber for so looong. I love you like it too 🚀.

[@peter8261]

I wonder if you could use this to make 3D interactive websites. That would be very cool.

[@JC-yy5nf]

isn't that literally what he just showed with the flexbox demo?

[@Ca-rp7bv]

Hey Theo how do I cache this ? export const getStaticProps: GetStaticProps = async ({ locale }) => { const accountManager = await getAccountManager(locale); // THIS FETCH return { props: { accountManager: accountManager }, }; }; React-Query is just too big for an ecommerce that only fetch data (and mostly on the server side lol)

[@azimutjava]

Good! Just what i need. Thank you!

[@abel090713]

Sick thumbnail

[@kasper369]

is react-three-fiber dev dependency? if it uses three under the hood. I don't want to increase my bundle size even more. thanks

[@parlor3115]

Try making these without unit-testing

[@martins3037]

Theo you should talk about Remotion, which turns React Code into Video, I guess there could be some overlaps with this library.

[@t3dotgg]

This is WebGL based, there is not much in terms of overlap and interoperability between R3F and Remotion :(

[@greendsnow]

Remotion is a niche. We already have Power Point and after effects...

[@dmnkb]

NGL R3F is amazing!! Only thing thats bothering me is theire usage of small letter components. The React ecosystem deprecates this and I'm wondering why pmndrs chose this 🤔 There isn't even an explanation in the docs unfortunately…

[@molesarecoming]

lowercase designates native host elements, they're not components. react itself is platform independent, it's just a components standard. that's why you have to pair it with a renderer, like react-dom, which then teaches react what a platform is. it tells it what a "div" is, or a "span", that colors start with "#", how events work and so on. a div then gets translated into document.createElement("div) by the react-reconciler which is inlined into react-dom. fiber is the same, it just teaches react what a "mesh" is, and it gets translated into a THREE.Mesh. lower case elements are fundamentally react, this allows a renderer to work independently of the host platform. for instance if the dom gets a new element tomorrow "" then you just need to update chrome and will work in react. i have not heard of react deprecating that. i think if people had to import { Div, Span, ... } from 'react-dom' there would be a revolt, and a mass exodus. if you're interested in how react does this quickly skip through this readme: github.com/facebook/react/tree/main/packages/react-reconciler there's also an example of a mini renderer to show the concept: codesandbox.io/s/reurope-reconciler-hd16y

[@dmnkb]

@@molesarecoming Thanks for the elaborate explanation, makes perfectly sense now!

[@fullstack_journey]

Anything that can be done with javascript, will be done with javascript

[@alpaca_growing_kit]

next GTA in javascript

[@theriser8751]

GTA 6 leaked in JavaScript

[@ooogabooga5111]

copium

[@cjjb]

Very cool

[@TheWnetoo]

Is there a reason to use this to create games? Besides being cool and interesting to have a tool that allow us to do that?

[@noahwinslow3252]

Perhaps if for some reason you're already in this eco system and don't want to be migrating to Unity or Unreal for a relatively minimalist project? Maybe you want to show off?

[@gwenthedoll3677]

Conveniency

[@KittyAdorer]

@@noahwinslow3252 fuck no

[@samu350]

Imagine you're a very busy js dev but want to do a cool project on the side, without having to change your mindset etc. Tbh I don't think this is good for big games at all, but it's good enough to make relatively small experiences.

[@mattc16]

Performance. A game engine like Unity has a lot of overhead. However, it brings tools specific to game dev that make you move faster as well as having a marketplace full of effects, meshes, physic systems, etc to get you rolling.

[@eadecoux]

More 3D stuff pls

[@DJBenito304]

❤

[@hl7297]

4:07 No way your machine/internet loads codesandbox that fast bro. Mine takes 5 sec to do the same thing.

[@mattc16]

He probably already had the application open, so he had no bootup time. Side note, I hadn’t realized there was an actual app for CodeSandbox until jus now.

[@nowisdumb9773]

Mind go pew…. 🤯

[@astrahcat1212]

Babylon js 😮😮😮

[@lawrencehelps8344]

Ha, made an integration layer like this between react and a custom rendering engine a few months ago.

[@handsome_man69]

Are you related to Owen Wilson...?

[@opti21]

yo

[@adammo6661]

Theo, plz, zustand is read, tsushtand, not zoostand

[@theriser8751]

GTA 6 is actually being made in JavaScript 😲😲

[@Bat-Georgi]

This is great and all but pls don't ever actually make a full 3D game in JS.

[@mariansam_was_taken]

I still can't that your pronouncing Zustand in English - it's a German word meaning state/order, look up the pronunciation please :D

[@thepaulcraft957]

JS or React weren't ever intended to be used to build this kind of stuff and I think in a bigger project, they really suck EDIT: It's interesting to see that this is possible