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.
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)
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
Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)
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.
Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.
Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка
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.....
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
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.
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 )
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.
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.
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_ 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.))
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. 🤔
@@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
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 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.
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:' )
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
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.
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 😭
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
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)
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?
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 ?
Отличное видео! 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?
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
Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏
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!
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 ()
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.
happy to hear that! have a happy holidays! 🎉 And you reminded me i need to learn to play guitar, awesome videos!
@@akella_ Thanks hahaha
Awesome Tutorial!! I hope you will make more tutorials using react three fiber.
Dude I've been doing this for like 6 or 7 years now and that might be the coolest animation I've ever seen
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.
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)
I never used Three.js or React.js before but this tutorial was so good I was still able to follow it!
Thank you so much, great video explaining everything in detail. Really helpful for beginners like me
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
Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)
Спасибо!
Thank you Yuri that's amazing !
This untie the knots in my mind. Now I can sleep peacefully.
Спасибо Юрий!
Коротко и очень информативно! Наверняка много усилий было потрачено на его создание спасибо тебе большое за это! Это топ контент.
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.
This video is useful till this date, I came here after recommendation of Olivier Larose and man you are awesome. Love from INDIA !!!
thank you Yuri, you need to put the applause button
thank you so much hands down the best tutorial on earth looking forward for more react base tutorials
Yes! More React tutorials Yuri! 🔥🤘
Great tutorial, I used my 3d shoe design and this configurator made it look dope.
respect++;
You're a gem for posting these tutorials, wanna be like you brother, hopefully I will one day ❤️
amazing, I love hearing your thought process on your videos! "make it beautiful"~
Yuri, you are one of the good ones. Thank you for all of your hard work because these tutorials are priceless!
Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.
Good stuff as always Yuri, more react-three-fiber in the future please)
Yuri, more React Three Fiber tutorials please! 🤗
Holy shit, such a good video, awesome job. I was struggling with 3js and textures / lightning coming out of blender
Ни что так не мотивирует учить английский, как твои видосы) очень круто!
Love the tutorial, You rock Yuri!
Very nice tutorial. Thank you.
Great video, spasibo Yuri :)
Amazing tutorial, can't wait to rebuild this with some of our 3D-Models!
Thank you! You saved my day!!!
Amazing, please make more videos on three js
Thank you so much. You are the best
Such a great tutorial! Thank you so much for taking time and helping us with your clear explanations :)
I loved this tutorial 😊
Oh man... I'm on vacation, please don't stop hahahah
If importing an using the useProxy hook cause you troubles, use instead the useSnapshot hook ;)
крутой видос) спасибо. Побольше бы r3f роликов
Great tutorial, like everything from you, Yuri.
Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка
Great video! Thank you so much!
This guy is a G!
Yurii, have a lovely Christmas / New Year!
Brilliant! 🔥🔥
Just awesome!! 🔥
mind blowing dude.. Awesome!!!
thanks, great job
awesome would love to see `how to use fragment and vertex in react-three-fiber this avoided me to work with it`
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.....
Hi Islam! search up Derek Elliot he just recently dropped a really good tutorial for modeling shoes recently.
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
Спасибо, что делишься опытом. Очень мало информации можно найти по three.js... Классная футболка.🙂
спасибо! это из киевского люка ;-)
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.
Thanks for this, good vid!
Very nice tutorial
суперкруто! дякую за відео)
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 )
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.
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.
oh my.. YURI IS THE BEST
Thanks for the tutorial! Can you also adjust the size of the components (example: make the laces bigger)?
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. ;)
i wish i knew blender that much! Gotta learn all of that!
@@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.))
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. 🤔
@@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
Wow, tanks!
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.
do you know how to do it?
@@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.
@@codingwithjuan8815 Hey, can you guide me towards decal option? Any tutorial or smth? TIA
Ну раз в react залезли, надо еще и typescript начать использовать )
Thank you
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:' )
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
how to show up a dialog/popup box once we hover over the model parts? Could you please help
amazing!
can we change the properties of the Shoe from outside the file..using reflection..without changing the generated code.
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?
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.
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 😭
Would love to see a tutorial for setting up the blender file
its magic
Thank You!
Would love to connect !
Warmest,
Kai
@Yuri could you guide me on how to achieve this in React-native expo project?
🔥🔥🔥
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
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?
models and all the code is in demo, i dont have any other than glb unfortunately
It looks great, how could it be done so that it also works with augmented reality? What code should be added?
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
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)
I uploaded it to patreon, i also coded it in 43 or 44th stream at the beginning, its like 10 minutes
Thanks ...can you try changing with textures and not colors
awesome
great tutorial! but i'dlove to add texture such as images and text to it, is that possible?
is it possible to change the scale of the object like changing the color of the object???
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?
thats even better than js in react context, it is ready to use Component, so just include it and put some tag
How can I show hex color numbers on input field ?
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 ?
Are you using gltf-pipeline with Node.js? I can't get it to work.
Отличное видео!
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?
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
ill solved it
Круто!!!!
Hey Yuri! Awesome video. Is there any specific reason why we are doing state management using valtio instead of the default react hooks ?
Lighting for web - tutorials please!
Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏
How can i paste an image on mesh side in glb model?
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!
i just tried, the demo is working fine now, mb something else is wrong
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 ()
Спасибо - интересно и полезно
Why do you use a proxy instead of just using useState?
wondering this too.
good