- Видео 50
- Просмотров 66 393
3eyes
Великобритания
Добавлен 13 июн 2024
Building a 3D website with R3F - pt4 Convert GLB models to code
Part 4 in my series building this site, which you can now see on a live link here:
marcelo-xcollab.vercel.app/
In this part we cover the process of exporting models from blender and bringing them into react three fiber using gltfjsx. We look at preparing your model, baking PBR textures and converting to a code based component for use in your r3f project.
This template is now available on my patreon:
www.patreon.com/c/3eyes_iii
marcelo-xcollab.vercel.app/
In this part we cover the process of exporting models from blender and bringing them into react three fiber using gltfjsx. We look at preparing your model, baking PBR textures and converting to a code based component for use in your r3f project.
This template is now available on my patreon:
www.patreon.com/c/3eyes_iii
Просмотров: 355
Видео
Building a 3D website with R3F - pt3 Moving 3D Objects with paths
Просмотров 837Месяц назад
Building a 3D website with R3F - pt3 Moving 3D Objects with paths
Building a 3D website with R3F - pt2 Moving 3D Objects with GSAP
Просмотров 694Месяц назад
Building a 3D website with R3F - pt2 Moving 3D Objects with GSAP
Building a 3D website with R3F - pt1 Setup
Просмотров 2 тыс.2 месяца назад
Building a 3D website with R3F - pt1 Setup
Grass made with shaders?
I love how you started out the video with "Might as well subscribe". Got me to click it lol.
@@donkeybetz5567 hahahaha…the best kind of marketing 🤣🤣🤣
shoulda posted it ,woulda loved to see it
Ugh cold coffee. Love this series!
Hahaha, and not even the fancy cold berw kind...just left it out for too long 🤣
After a long time , cool video love it❤🎉🥰🥰
Yessssss, apologies for the delay - back on it now!!
First Comment!!!!!!!!!!!🎉😄
@@valentinneher let’s gooooo
nice, plz complete the series of can website
This is sweet. I'm just getting into voxel development, so I'd love to see what I can do when playing with texture displacement.
oooh yeah i bet that'll work really nicely!!! I've been slowly coming round to looking at voxel development...seems like you can do alot of cool stuff with lighting
@3eyesiii Yeah! I'm actually trying to work some shader bugs out today. I don't have a channel or anything now, but it would be really neat to post stuff in the future!
Nice work! I like how the rough, more polygonal texture peels off to reveal an almost crystal like, clear gelatin material. Very polished.
thanks man!!!
@3eyesiii You should be thanking yourself, to be honest! There's no way this would exist for so many people to see without someone doing it first, right? It's good to inspire people before they lose hope, so just make sure that someone is you.
Great content. I love it.
tysm
I would pay to change the name of that physics library
lololol, I think we should start a petition....or a new physics library
noob. jk you know i love ya.
🤣🤣🤣🤣🤣
Its so smooth. Nice 👌✨️
thanks man!!! Will publish the code on my Patreon soon
Amazing work Bro! 🎉 Keep rocking 😎 ✨️ 👌
Cheers bro!!!!
Been trying to do this myself but cant seem to figure out how to move the triangles from their centre’s and not the vertex. Goes to show i have a long way to go. Looks great man❤
I'm guessing average out the vertex positions to find the center and then move the triangle along the axis of the surface normal per triangle?
@@CastleRene yeah this is pretty much it - convert the mesh to non-indexed, then average out the vertices in groups of 3 to get the center of each tri. I store this in a data texture and use this in a vertex shader to know what to displace ...published the code on my Patreon ;)
@@3eyesiii Wow, that's really smart! It seems you know your way around the keyboard! I would love to discuss this type of thing more often, but no one's super talkative.
Make more videos in R3F please! Only you are out there making really understandable thanks!!!
Im currently obsessed with shitty youtube content 👀
hahahaha, you're in the right place
hey bro i m from pakistan too, plz complete the juicy can series
yoooo, when first learning this shit you think chatgpt on your site or nah? Quite complex so it can help but will it force me to skip fundamentals idek yet
@@byDevCreates I tried it about 18months ago when I was first starting out…in some ways it was good but looking back the code structure and the way it all works together was pretty bad…meant that I missed out on understanding code optimisation, however it is good for explaining things you might not understand
very impressive, uk I never really got the hang of shaders like this. I really should do some more studying. Do you recommend I go into glsl shaders? if so, what resources do you recommend? or should I wait for TSL and webGPU?
@@itsmahmoud_dev I did a course by a guy called Yuri artimuth on compute shaders which changed the game for me - there is a lot more power you can juice out of them this way
nice one!
DAMN YOU FOR NOT POSTING WHEN IM THERE
@@byDevCreates 🤣🤣🤣🤣 more to come
Flame 🔥🔥
@@byDevCreates lololol…that’s more like it
🎉🎉🎉
@@StynerDevHub 🙏🏻🙏🏻🙏🏻🙏🏻
dopeeee, would be amazing to make it a library. I think you can have your own drei haha
@@juangoyret9364 I’ll call it vier 🤣🤣
@@3eyesiii hahaah ! please
Lame
@@kevinfedex9209 it’s ok everyone, I’m pretty sure he meant to say Flame 🔥🔥 before you all start thinking he’s a boring tit who has nothing better to do than post dumbass comments
*Flame
@@3eyesiii 😂😂😂, you got me on flame 🔥🔥, but your video was boring sorry my opinion hurt your little baby feelings
Hey bro, your content is awe-inspiring. I saw every short and full video on your channel. Please make full videos on creating 3D models in Blender, export them, and show the 3D models on the web with R3F. I'm a subscriber from Pakistan. love you ❤❤❤
@@anwaarhusnain ayyy thank so much man!!! I’m on it - just got caught up with client work!!
Plugging in random flash drives from stranger's isnt the greatest of ideas
@@someadamguy386 fortune favours the brave my friend
🚨🚨 THIS HAS NOW GONE!! 🚨🚨
What did you use to create the sequence?
@@Pmarmagne this is theatreJS
@@3eyesiii thank you. I really like what you did. It's very immersive.
@@Pmarmagne thanks!!!
You just earned a subscriber mate, keep the videos raw like this. Run into errors, solve them in realtime without cutting the troubleshooting part. You’ll go a long way ❤️
@@nishitlugun8394 appreciate this man!! I feel like there are too many clean cut devs out there - but problem solving is a massive part of working things out (and often finding new ways to do things!)
@@3eyesiii Problem solving is the most important part. We as beginners, simply copy the code provided without even knowing what the error was and then later on get stuck while creating our own projects. This is some unique and necessary content that you're providing us. 💯
This is the kind of video that every frontend developer needs where the tutor himself is running into errors and solving them in realtime. Mostly all of them cut the part where they troubleshoot the problem. Kudos to you mate. You’ll go a long way. Do Not become like others. ❤️
@@nishitlugun8394 feeling the love man 🙏🏻🙏🏻🙏🏻
this is very awesome idea for website, i'd for sure be sitting in it for while with this much interactivity 😂❤
@@scawuza will be putting it live at the weekend - it’s going to be shown at an art exhibition
Do you usually write and use shader in glsl file?
@@quang4705 yeah man
keep going, bro :3
@@barebruh more to come my dude
hey man, could you give me some general tips on recreating something like this? I've been trying for a week and it performs like shit
@@roguegoblin2407 ah yeah man, you gotta recompute as much as possible - don’t try and work out positions and stuff in runtime. And if you’re feeling brave, look into compute shaders…you store all the data you need in a texture and then read that texture in a shader (which moves all the computation to the GPU)
@@3eyesiii ohhh got it! I'll see if I can work something out hehe, thanks for the tip
Damn, your content is 🤌🤌
@@michawesoek3255 appreciate it man!! Thank you
Man, I swear you are a legend ❤
@@Mirage_Warrior 😎😎😎😎 lol, tysm
what is that keyframe dopesheet stuff in r3f website below left?
waiting for the next video Bro!
curstyMcCrustFaceMaterial
@@byDevCreates hahaha, it’s the most technical name I could think of
you should make a tons of these awesome video! come on man, upload more.
@@jacsurfing planning to!! Got a bit busied up with life!!! Brb
are you self taught? did you study anything at uni or where'd ya learn this
@@byDevCreates yeah self taught man, actually studied music for a year and dropped out to be a rockstar 🤣🤣🤣 mostly picked this up from studying the examples on the r3f site and reading blogs
@3eyesiii nice! So u didnt do like comp sci or physics and maths and shit? Also only front end you focus on? Nothing needed on backend to serve assets?
@@byDevCreates yeah man, just picked it up as a hobby - I do build out some systems sometimes…nothing too intense for back end though
@@3eyesiii need to make a course or beginner tut. This is lit.
This looks incredible 😮
@@TheBoab400 tysm 🙏🏻🙏🏻🙏🏻
Lessgoooo !!
@@rishabprasoon5970 🔥🔥💯🫶🏻
Sick
Can you please make a video explicitly about this package in detail, converting glb to code. Cuz this actually seems so useful. I've only been introduced to baking with bruno's three.js course, which looked like a hassle. If that package does all that, I'd like to know more.
Ok yes, this is next on my list!!! I do have a couple of 1 min vids on my profiles that touch on it - look for the vids with the brick walls!!
Why do you stopped to upload video😭😭😭
Sorry dude - got quite busy with client work the last 2 weeks - will resume shortly!!
Absolutely bonkers mate.
Nice one ... 3D for Web.