3D model configurator with React Three Fiber and gltfjsx

[@Fingiorstyle]

Thank you so much for making this live tutorials with three.js and React Three Fiber. This was the best christmas gift that youtube could give me.

[@akella_]

happy to hear that! have a happy holidays! 🎉 And you reminded me i need to learn to play guitar, awesome videos!

[@Fingiorstyle]

@@akella_ Thanks hahaha

[@ipomazkin]

Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)

[@akella_]

Спасибо!

[@andrewiglinski148]

Dude I've been doing this for like 6 or 7 years now and that might be the coolest animation I've ever seen

[@purgex2286]

Thank you Yuri for making this tutorial. I did an exploding animation of a shoe using children property , threejs Raycaster and vector mathematics. I didn't know gltfjsx existed and made it much easier. This helped a lot and gave me more ideas that I'm gonna implement now.

[@georgiosburnham]

Do you get an error when use the command line npx gltfjsx model.gld? (node:22180) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time (Use `node --trace-warnings ...` to show where the warning was created) Parse TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11118:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[@Vad11m1]

Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.

[@charuldalvi7619]

Awesome Tutorial!! I hope you will make more tutorials using react three fiber.

[@isabel2793]

This is beautiful, Thank you so much 🙏 you explain so well!!! it was so easy to understand each step. Finally i'm gonna be able to use this knowledge to show my 3D models on my website portfolio

[@hitzcritz]

I never used Three.js or React.js before but this tutorial was so good I was still able to follow it!

[@apuroopbusetty2432]

Thanks Yuri , very good video on three js using react. I really like how you made it very professional. This is by far the best tutorial for three and react.

[@csf4442]

Yuri, you are one of the good ones. Thank you for all of your hard work because these tutorials are priceless!

[@faisaltariq-un6so]

thank you so much hands down the best tutorial on earth looking forward for more react base tutorials

[@ivanm4216]

Спасибо Юрий! Коротко и очень информативно! Наверняка много усилий было потрачено на его создание спасибо тебе большое за это! Это топ контент.

[@kr0k0deilos]

Good stuff as always Yuri, more react-three-fiber in the future please)

[@suhaybahmed3813]

Thank you so much, great video explaining everything in detail. Really helpful for beginners like me

[@deathdefier45]

You're a gem for posting these tutorials, wanna be like you brother, hopefully I will one day ❤️

[@prabhakardeep]

Great tutorial, I used my 3d shoe design and this configurator made it look dope. respect++;

[@VIMPdev]

Ни что так не мотивирует учить английский, как твои видосы) очень круто!

[@unrank3d136]

This untie the knots in my mind. Now I can sleep peacefully.

[@aprilonian5189]

amazing, I love hearing your thought process on your videos! "make it beautiful"~

[@PraveenLodhi-mz5qj]

This video is useful till this date, I came here after recommendation of Olivier Larose and man you are awesome. Love from INDIA !!!

[@vikashchand.]

Yes! More React tutorials Yuri! 🔥🤘

[@RRits57]

Holy shit, such a good video, awesome job. I was struggling with 3js and textures / lightning coming out of blender

[@MnMn-dc9pe]

thank you Yuri, you need to put the applause button

[@damisau]

Amazing tutorial, can't wait to rebuild this with some of our 3D-Models!

[@meutiti]

Thank you Yuri that's amazing !

[@Fingiorstyle]

Oh man... I'm on vacation, please don't stop hahahah

[@DanielEguia]

Such a great tutorial! Thank you so much for taking time and helping us with your clear explanations :)

[@asapdev8813]

Love the tutorial, You rock Yuri!

[@vd7205]

Yurii, have a lovely Christmas / New Year!

[@ValeriiYanchev]

Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка

[@rusicsemenov]

Great tutorial, like everything from you, Yuri.

[@jeffreyyeung957]

Very useful tutorial, thanks.

[@ilyablinov289]

Great video, spasibo Yuri :)

[@ifiokumoren6759]

Thank you so much. You are the best

[@mipisha]

Yuri, more React Three Fiber tutorials please! 🤗

[@fahadkarim8705]

Amazing, please make more videos on three js

[@BGbenNet]

Thank you! You saved my day!!!

[@lubraluna]

If importing an using the useProxy hook cause you troubles, use instead the useSnapshot hook ;)

[@mipisha]

I loved this tutorial 😊

[@MaxKievSky]

1:35 In order not to use file compression, you need to bake textures and make a set of maps from them, including normalMap, then the quality of the object will visually remain at the same level and the file will be hundreds of times lighter. and instead of a shader, it is better to use PBR material settings. This will reduce the consumption of RAM and video memory on the client. ;)

[@akella_]

i wish i knew blender that much! Gotta learn all of that!

[@MaxKievSky]

@@akella_ Modeling, customizing materials, and understanding mapping processes can sometimes take several years before a designer achieves product-level quality. So a person cannot know everything. And for this there is no need to worry.))

[@akella_]

Also wondering, how are shader settings different from PBR? On the client its just MeshStandardMaterial in both situations i guess, or am i wrong? Oh, or mb it might be either MeshStandard or MeshPhysical, Standard is a bit faster. 🤔

[@MaxKievSky]

@@akella_ standard MTL, u use normal, bmp, roughness and metallness slots, sometime u should use another map for glass, opacity and its depend from realistic looks in front render

[@wowashlam]

Great video! Thank you so much!

[@slavik.nychkalo]

суперкруто! дякую за відео)

[@matheusasilva1170]

Your project is very good, please do one more. I would really like to know how to make a website like the "eafc kit creator", with different models and editing. Thanks

[@avinashci]

mind blowing dude.. Awesome!!!

[@islamrakib3768]

Nice tutorial, just love it i want to following this tutorial but I’m new in 3D animation so could you suggest me any tutorial or any suggestions to create shoes model as like your shoes zip . I’m waiting for your response thank you.....

[@a17labs28]

Hi Islam! search up Derek Elliot he just recently dropped a really good tutorial for modeling shoes recently.

[@timurgumarov_dev]

Just awesome!! 🔥

[@tshivhulatshilidzi9209]

This guy is a G!

[@creativetech8471]

awesome would love to see `how to use fragment and vertex in react-three-fiber this avoided me to work with it`

[@ДмитрийГусаров-к5о]

крутой видос) спасибо. Побольше бы r3f роликов

[@MrKokosovi4]

thanks, great job

[@Dr.CarolineH]

Hello, I have some troubles with "material-color" when I add them the .gltf ot .glb file can't be loaded. I am on jsx, any idea?

[@FutureVision-x2z]

hello, i really loved this video so much but i have a question .how can i modify the actual geometry or the shape of the model, for ex (if i have a chandelier model and ii want to change the bulb )

[@ItzTimm]

Can you explain how you created/configured the blender model in the first place (applying material settings, centering the origin on the shoe, etc)? I'm trying to apply this to an existing blender model but am having trouble.

[@dropDuckets]

Did you have any luck? I've tried importing stock glb files into blender and then exporting them using the x 6 compression. When I render them with fiber I only get one or two materials showing up.

[@matheusasilva1170]

our project is the most incredible I've ever seen. I have a question: how do I change the textures and add images in the same way it's done on the "eafc kit creator" website? Thank you.

[@effiongsamueljames]

Hello i need help, each time i add my shoe function, it keeps giving the error, " shoe is not part of THREE namespace" i can continue with the tutorial as my shoe is not added yet to the canvas

[@tinna2941]

Thanks for the video! I had trouble importing the .gltf models but after watching your video I found the last missing piece for the puzzle. For some reason importing only worked when I placed the .gltf file in the public folder as you do.

[@codingwithjuan8815]

It would be awesome if you could create a video adding the functionality of importing an image (a logo for example) and letting the user move it around the shoe. Thank you :) Amazing video.

[@alfeensadiq8389]

do you know how to do it?

[@codingwithjuan8815]

@@alfeensadiq8389 Yes! You can either have a plane mesh with opacity 0 then let the user add a file type png then turn the mesh's texture to the picture uploaded and turn the opacity to 1. Also have a shrinkwrap of this plane mesh linked to the model that you want to appear on top of. There seems to be a better option though, it is using decals but I couldn't make it work so I just did it my way.

[@phygitalista]

@@codingwithjuan8815 Hey, can you guide me towards decal option? Any tutorial or smth? TIA

[@valeerasanguinar245]

Hello, I'm having a problem using "Canvas" and "Suspense" since they did add it recently I guess, if possible, what can I use instead, I looked everywhere but couldn't find anything. ( I would get this in my console also 'index.js:1 The above error occurred in the component:' )

[@lucaacaprio]

Thanks for this, good vid!

[@firstignitor]

Thanks ...can you try changing with textures and not colors

[@urbanebachelor]

I love this breakdown. However, I've been trying to use this method with other models but gltfjsx gives me the material in this format "material={materials['Material.001']}" and I can't figure out how to tell Valtio what material I'm targeting. I've tried everything 😭

[@bogasaiteja8968]

how to show up a dialog/popup box once we hover over the model parts? Could you please help

[@dwang3142]

Thanks for the tutorial! Can you also adjust the size of the components (example: make the laces bigger)?

[@avirads]

can we change the properties of the Shoe from outside the file..using reflection..without changing the generated code.

[@ludasolodka7747]

Спасибо, что делишься опытом. Очень мало информации можно найти по three.js... Классная футболка.🙂

[@akella_]

спасибо! это из киевского люка ;-)

[@PeteSchirmer]

Would love to see a tutorial for setting up the blender file

[@muntakim.data.scientist]

Hi Yuri, Can you tell me where I can find the models for this project, or any guideline how we can dynamically take all the meshs?

[@akella_]

models and all the code is in demo, i dont have any other than glb unfortunately

[@dimovich85]

Wow, tanks!

[@daavidaviid]

Very nice tutorial

[@omarmendoza5972]

It looks great, how could it be done so that it also works with augmented reality? What code should be added?

[@sabikaali5527]

I keep getting 'Could not load /model.gltf: Unexpected token < in JSON at position 0' even though my gltf file is in the public folder

[@marvinJo]

Thank you

[@ooees]

oh my.. YURI IS THE BEST

[@wolfcode292]

How can i paste an image on mesh side in glb model?

[@joelfuller4677]

amazing!

[@opa1571-j2j]

Nice tutorial, is it possible to use patterns (like a mask) instead of a color and make the change able on one part of the shoe (like if I click the sole it works) but other parts can''t be changed

[@YiranFitzpatrick]

Hey Yuri, you video is extremely helpful. I followed your video but why after I applied npx gltfjsx model.gltf, I got .jsx instead of .js? Could you help me to fix it?

[@akella_]

thats even better than js in react context, it is ready to use Component, so just include it and put some tag

[@КирДонцов]

Ну раз в react залезли, надо еще и typescript начать использовать )

[@ashikrabbi4300]

how can you zoom the image?

[@ArtemLyach]

🔥🔥🔥

[@morneerasmus1789]

This is amazing!!!!

[@ollegat]

its magic

[@baka6574]

Hi Sir, I love your videos but I want to ask you a question: is it possible to have the link of your three.js basic template? I can not find it and I don't know how to get it. Thank you so much(I'm new to this channel and the folder is used in the past videos)

[@akella_]

I uploaded it to patreon, i also coded it in 43 or 44th stream at the beginning, its like 10 minutes

[@arunkumaarsrinivasan5845]

is it possible to change the scale of the object like changing the color of the object???

[@ИванСоловьев-щ8з]

Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏

[@flooring4850]

Hey Yuri, useGLTF is no more working. Even example on official website is not loading. The same happened to your sandbox. Do you maybe know any workaround? Thanks!

[@akella_]

i just tried, the demo is working fine now, mb something else is wrong

[@glendonphilippbaculio1811]

pls give me tips to make it work in react native.

[@Salemoche]

Why do you use a proxy instead of just using useState?

[@jrichardsio]

wondering this too.

[@anficyon]

how can I add a progress ba to this example? ,in the the useprogress DREi example but is confusing and the % of loaded dont match with the data downloaded

[@anficyon]

ill solved it

[@prithvimohanty7778]

@Yuri could you guide me on how to achieve this in React-native expo project?

[@naonvl3399]

great tutorial! but i'dlove to add texture such as images and text to it, is that possible?

[@aadeshkulkarni608]

Hey Yuri! Awesome video. Is there any specific reason why we are doing state management using valtio instead of the default react hooks ?

[@dylanking000archive]

awesome

[@tadachaipanya6647]

How can I show hex color numbers on input field ?

[@papadong]

Hi Yuri, thank for the tutorial. I try to compress the model with your settings but I can't go under 1260Ko. With gltf-pipeline and compression at 10 in glb, I just win 600Ko (1810Ko to 1260ko). Far from your 243Ko, do you have an idea ?

[@dropDuckets]

Are you using gltf-pipeline with Node.js? I can't get it to work.

[@KaiBuskirk]

Thank You! Would love to connect ! Warmest, Kai

[@tadachaipanya6647]

6:34, It doesn't show the shoe, there is an error said Error JSON Parse error: Unrecognized token '

[@akella_]

see in a network tab what kind of response you are getting.

[@tadachaipanya6647]

@@akella_ Sorry, I forgot to upload "shoe.glf" file to the website. 😁

[@Sobieski526]

Отличное видео! I am learning React and trying to create a custom material using React Three Fiber and apply it to one of the meshes from the imported GLB file. Whenever I pass a new material definition () into my object nothing happens. Any advice/suggestions on how to make it work?

[@anficyon]

thanks, When we use the orbitControls component we can assign (set) various properties of the OrbitControls but how can I call the methods like .getPolarAngle () .getAzimuthalAngle () .update ()

[@henryfadoni]

Is it possible to paste and image in an GLB file?

[@akella_]

textures could be included in .glb