I can’t believe they built this in React

I will take EVERY opportunity I can to shill Paul Henschel. 0xca0a is a legend and things like this blow me away. React Three Fiber deserves way more hype
SOURCE
vercel.com/blog/building-an-i...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

[@FunctionGermany]

i think when people hear react, they think of DOM rendering, but this is actually WebGL. it's just driven by react and threejs. not sure how i feel about the video title.

[@1rez378]

It also feels disingenuous because he already did a mario kart in react video.

[@FunctionGermany]

@@1rez378 right. with the mario kart video you could argue that there's a lot more input and data management that's lifted using react infrastructure, but in this case react barely adds anything to the product.

[@WilliamWelsh]

thats because most people think of react the web framework and not react itself which is really a state management library, unfortunate that they are named the same thing

[@WilliamWelsh]

@@FunctionGermany reacts composition is what makes this project's code so delightful

[@nikkehtine]

yeah that's what I thought, that they somehow arranged divs with React to make it feel 3D, but after first few seconds of the video it became apparent it's just Three.js as usual

[@connorskudlarek8598]

Great. Another technology hiring managers are going to expect me to know. (/s... kinda)

[@CassandraTT]

I genuinely dislike stuff like this because it's useless in the real world. We don't have a great solution for forms of any complexity still, but I can drop a 3d badge from the ceiling? It's showy over substance. It's developer dick waving.

[@arraywaves]

​@CassandraTT It does have real world uses though - marketing and creativity. Consumers don't care about what's going on under the hood and creatives don't necessarily want to become software engineers.

[@CassandraTT]

@@arraywaves Sorry, let me be clear. Most of us developers; MOST, do not deal with fancy 3D shit, we deal with data, forms, and just collecing and sharing information. MOST of us deal in crud, so when I see half baked forms but shiny badges, I give the old side eye.

[@Vin50000]

12:45 bit of a misconception the pink material used in many engines is not for when the game is being made its too make rendering problems obvious, if for some reason materials arent applying to an object they'll look like that. Its there because otherwise engines would only really have two ways of resolving this, throwing an error or not rendering the object. When developing you'll usually use some standard usually grey material

[@trumpetbob15]

Exactly - hence the term "grey boxing" for prototyping with primitive shapes without proper textures. That purple and black texture would drive me nuts!

[@trumpetbob15]

That is an awesome looking result! Fun fact: That Catmull-Rom curve thing you skipped over was created by Ed Catmull, the co-founder of Pixar. Some of his other work is used in Blender to create round spheres from what are actually triangles.

[@grantderepas6234]

Love seeing react-three-fiber content. It's really fascinating and slowly building my own courage to dive into it and find a reason/way to use it in my own projects.

[@PaulPhilp-pe5oe]

I love it. I worked on the software that was used for T2, Titanic, Jurassic Park (and the Acura NSX). I'm not sure I would have believed all this was possible back then. Magical.

[@stevencalhoun1380]

Thank you for your work on JP. My favorite movie of all time.

[@ArnoneWilliam]

Great video Theo! I'm actually studying r3f and I'd love to see more content about it

[@LEDsellers]

This was phenomenal, would love to see more of this in the future

[@muhamedmouzoun]

That is awesome! I'm really starting to like your channel ! Thanks a lot !

[@pjosxyz]

dropping in on load to avoid a loading spinner is chefs kiss

[@helleye311]

I love three, it's magical that we can do this sort of stuff, not just in the browser but in react. Making a game might be a bit much for this model, but dropping an interactive badge on a normal site is such a nice way to add some flare.

[@infantfrontender6131]

For games we have game engines with web export or written on JS like Phaser, Cocos, Kaboom

[@JordanRobots]

Sick. three.js is something I've been wanting to dig into for a while. I would definitely watch more weird deep dives like this.

[@TwiceVisible]

4 views in 1 mins?! Good to see the coolest four people here :)

[@vividhgarg7385]

I was really excited to see this video because I unironically worked with react-three-fiber and rapier at my workplace.

[@KatieKatGG]

This is actually so cool. React supporting static meshes is actually INSANE. Makes me want to shelf my game projects and make a website instead! Rendering text ONTO the mesh too and having it baked on? Woah

[@mchisolm0]

Yeah, I’m super interested in this sort of stuff. Definitely putting this article on my list for my students. Thanks Theo and team!

[@zeusthundr6876]

As an aside, your skin looks great BTW, would like to know what you use.

[@paxdriver]

Yes!!! Three, drei and react content would make me cream, especially for nav, transition and streams.

[@KristianTheDesigner]

Yes! This is the stuff i am really into. I learned Blender during the pandemic and 1.5 year ago i started to learn frontend dev. I love this type of stuff.

[@dehrufus]

I miss the Flash days when doing pointless things that just look cool was a full time job.

[@0ooDT]

The word “rapier” is pronounced as “RAY-pee-er.” Here’s the phonetic breakdown: • “RAY”: sounds like the word “ray.” • “pee”: sounds like “pee.” • “er”: sounds like the ending in “other.” Great video. Just had to say something.

[@lurifaks92]

Who the fuck asked

[@malvoliosf]

How about “Drei” (the German word for three), pronounced “dray”?

[@qwfp]

He even pronounced it correctly in "Dimforge Rapier physics engine"..

[@JansthcirlU]

believe it or not, you didn't actually have to say something, especially not when half your "phonetic breakdown" is saying "X sounds like X in exactly the same way it's written" when you could've kept your comment to just the first sentence to get your point across

[@PapaVikingCodes]

He got it right once.

[@mohabedr5030]

Imagine vercel choose svelte instead of react

[@Fanaro]

Paul is 100% a genius.

[@someonewhowantedtobeahero3206]

5:48 almost made me choke on my drink

[@dannyisrael]

Super cool. All technical stuff is cool.

[@calcal6508]

I'm currently half way through my diploma in IT and I can safely say that I will unfortunately never make something that cool in css due to css being css :( I've been putting in extra effort over the holiday to improve my css but things just get more confusing when it comes to css; I wish css was just js because even if js isnt the best language in the entire world at least it makes some fucking sense lol I enjoy your vids too, educational AND entertaining; gotta fuckin' love those expletives too

[@luka1790]

Have u tried tailwind?

[@calcal6508]

@@luka1790 The only thing that I dislike is the purge(which is necessary, I understand that lol) most of the code I write is heavily dynamic nowadays, and using tailwind is more effort than it's worth with that kind of methodology; I have nothing against tailwind except that it is hostile towards my development methodology lol I looked into it though and it seems good other than the purge, that's when I decided to ignore it and try and figure something else out; maybe emotion; but then theres the problem of horrible caching(from my current understanding) I just want to find a nice middle ground that isn't convoluted as fuck tbh its getting to the point where I may as well have a go at a solution myself

[@wdestroier]

You can learn Flutter

[@J1Jordy]

Can someone write a library to convert this to elements so it works in emails?

[@dreamer4515]

It won't be feasable though

[@grandpowr]

Its really really cool! Want to learn more about it, gonna do some research

[@sukritsaha5632]

Really want to go deeper into React Three Fiber.

[@ahmedam77]

Great video!

[@ermilburn02]

As both a game dev and a React dev, I love React-Three-Fiber

[@drevolan]

As someone who works with 3D web viewers daily, I find it refreshing to see your excitement about something that has become routine for me. I genuinely hope that 3D web technologies grow in demand because, right now, it feels too niche, and I worry I've somewhat pigeonholed myself. However, it's a great middle ground that allows me to work on 3D projects without being part of the often challenging gaming industry.

[@complexity5545]

Yeah I used to do stuff like this as kid working for web-page companies from 2000 up to 2008 and films. Now I do some of this with thermal cameras, LIDAR, and visible light and render it on browsers and mobile phones. I still do gaming too (in unreal). 3D artist and such never caught on for the masses. Its always gaming industry, cartoon networks, aviation, maritime, and medical companies that what the service.

[@smoked-old-fashioned-hh7lo]

it's going to be huge in a few years. once webgpu gets supported in more browsers. webgpu + wasm is going to be crazy for game development. actual cross platform games that can be played in the browser. that's more of a niche use case but it has a lot of potential.

[@wlockuz4467]

As a web dev, Basement Studio seems like a nightmare to have as your design team. 😂

[@fieryninja2374]

Me being a game dev/web dev. Now I can combine them together

[@Gustavo-bi4hv]

These devs are the dream of crazy UI/UX dudes

[@user-op1pp9ju6x]

Who said you don't need math to be an engineer !

[@ISKLEMMI]

Three.js and rapier are truly fantastic. :D

[@tncoder]

This is so awesome

[@JozefKonradPlata]

A little bit of physics always does the impression.

[@dovonun]

Love this!

[@isan-sunshine]

still trying to comprehend it, I seem to have to try it

[@3pm479]

Its done in Fibre Three ..why surprised

[@claireelstein2562]

"One of my favourite humans" - said like an 👽

[@dipikashinde1373]

👍👍 please make a playlist like js,react,css etc so we can search related topics from playlist

[@quinndirks5653]

Pretty neat!

[@sebastianmihaiprisacariu8975]

Yes please for more 3d and r3f! :)

[@lifeisfakenews]

I suspect that drei is pronounced like dry as drei is german for three (could be wrong though)

[@PaoloDiBello98]

Absolutely! You're right, especially since the actual library is called Three Fiber…

[@weltraumaffex]

Yeah, Drei is the German word for three and dry is almost the correct pronunciation (not sure how to describe how they are different tho) IPA: Dry: [ˈdɹaɪ] vs Drei: /d̥rɑɛ̯/

[@dealloc]

Close, but the "ry" sound is more like an "r-ai" sound in German. You also pronounce the "D" more prominently. "D-uh-rai"

[@lifeisfakenews]

@dealloc i get what you are saying, but dry is the closest i could thing of that couldnt be mispronounced - dry has one pronunciation and its nearly (but not quite) the same as drei in german, ai sound has more pronunciations

[@andrewtfluck]

You've almost Paul Henschel a massive disservice! You almost forgot how he kick started Paranoid Android, a popular AOSP ROM 😀 He's definitely a cool dude, though! And has made an extremely valuable transition to the web community. I can't seem to convince him to come back to the team though, you web people have him! 🤣

[@jim.....]

webgl is why I became a webdev :~)

[@nonstopper]

The page is no longer up unfortunately

[@ppconde.1993]

I'm on the threejs hype train. Let's goooo

[@iamAliAhad]

Thanks, But I really hate too much animation in web!

[@skeleton_craftGaming]

Another AAA company using blender! Even if they're not in the film or gaming industry, Versel is definitely aaa company.

[@null_spacex]

Blender is AAA software

[@skeleton_craftGaming]

@@null_spacex sadly it is not [or at least in so much as it is not an industry standard in any industries... Blender foundation is definingly an AAA company...] , however that is changing... but first Sony [#fucksony] and now Versel it is defiantly gaining traction...

[@R_Y_Z_E_N]

We can create the same using matter js

[@lronmate]

5:31 ayo

[@OdeleTech]

dawg lmao

[@nateshrager512]

Honestly id just use webgl

[@doce3609]

2:06 I am dying. It is pronounced more like "drai" or "dry" not like "drey"

[@cristianosoleti489]

*in js

[@MrSofazocker]

12:47 "This is when making a game" - Haha, wel kinda, but no, It's this ugly pink so when you dropped in all your models and textures, you immediately see errors, such a missing texture, which this pink grid texture represents. GameDevs aren't giving themselves Eye Cancer lol. But yes, we use grey boxes, while building levels, testing etc. It's also called WhiteBox, or later with a litle bit more refined models, GreyBox stage in development.

[@NibsNiven]

You're reading faster than you comprehend. Slow down so you don't misread so many words.

[@misdelivereddishwasher1011]

he doesn't comprehend much anyways, don't bother, just watch a real content creator. plenty of people know what they're talking about, but not this guy

[@AndrewTSq]

Its way easier to use threejs without react, but nice anyway.

[@godismyway7305]

React is going out of controll for this one lol

[@PlayBASIC-Developer]

pretty cool.. but anyway

[@misdelivereddishwasher1011]

i think your reading level could still be measured in terms of elementary grade lmao

[@ocxigin9220]

Lol, am really disappointed in this video. It's really not that impressive. If you take your time and learn canvas element in JavaScript, webGL and three.js. You be blown away. This is just another basic thing canvas can do. 😂😂😂😂😂

[@wojciechosinski5927]

Yeah. It’s just React wrapper on ThreeJS. I guess it enables React devs but literally no one else.

[@worldadmin9811]

super cool! the prime dig was a bit bad taste tho; especially during pride month

[@justXcallXitXtechno]

not quite sure what you're on about, and maybe I'm wrong - but sounds like some of the usual, naive sensitivities, and self-importance. or have you ever wondered why someone's orientation should auto-validate for 30x more "attention" or "importance", than someone tackling the modern challenge of raising a child. for instance? not that it's technically hard either. but at least it can be considered some sort of accomplishment or courage. don't you think?

[@gcash49]

man rly got mad about this, wonder what u look like irl

[@BananaPuppyBruh]

How can you even come to this conclusion without implicit homophobic reasoning in YOUR mental gymnastics? Seriously please explain how you interpreted "lol penis, I bet these people would think penis funny" as "grr gay people".

[@guava_gary]

i'm pretty sure he just meant that Prime's audience would be immature about it

[@wlockuz4467]

​​@@justXcallXitXtechno Calm down. You're digging too deep into a joke targetted at another joke.