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.
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.
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)
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.
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…
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
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?
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.
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.
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
That flexbox example was a massive flex 💪
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.
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.
ahh shit i need more time in my life to play with this
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.
Anything that can be done with javascript, will be done with javascript
next GTA in javascript
GTA 6 leaked in JavaScript
copium
Babylon js 😮😮😮
I wonder if you could use this to make 3D interactive websites. That would be very cool.
isn't that literally what he just showed with the flexbox demo?
I'm a new dev but have a 3D background. First thing I did was make a project with react three fiber.
I've been waiting for you to cover react-three-fiber for so looong.
I love you like it too 🚀.
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)
This is great and all but pls don't ever actually make a full 3D game in JS.
I was legit asking this question 3 days ago. Theo is a legend always few steps ahead
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
Good! Just what i need. Thank you!
yo
Theo you should talk about Remotion, which turns React Code into Video, I guess there could be some overlaps with this library.
This is WebGL based, there is not much in terms of overlap and interoperability between R3F and Remotion :(
Remotion is a niche. We already have Power Point and after effects...
❤
Try making these without unit-testing
4:07 No way your machine/internet loads codesandbox that fast bro. Mine takes 5 sec to do the same thing.
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.
Very cool
Theo, plz, zustand is read, tsushtand, not zoostand
Sick thumbnail
I still can't that your pronouncing Zustand in English - it's a German word meaning state/order, look up the pronunciation please :D
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…
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
@@molesarecoming Thanks for the elaborate explanation, makes perfectly sense now!
Mind go pew…. 🤯
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?
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?
Conveniency
@@noahwinslow3252 fuck no
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.
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.
More 3D stuff pls
GTA 6 is actually being made in JavaScript 😲😲
Ha, made an integration layer like this between react and a custom rendering engine a few months ago.
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
Are you related to Owen Wilson...?