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.....
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.
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 😭
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
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 )
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!
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?
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)
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
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 ?
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 am getting this with drei 5.00 when I downgrade to 4.18 I am getting different erros Error when converting '/node_modules/@react-three/drei/web/Html.js' esmodule to commonjs: this[e.init.type] is not a function Error when converting '/node_modules/@react-three/drei/core/softShadows.js' esmodule to commonjs: this[e.type] is not a function
Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)
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 ()
Отличное видео! 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?
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
все круто, як завжди, можна і хайпанути на наступному стрімі, www.cyberpunk.net/ua/en/, а саме: розібрати світчер гліч картинки, дякую Вам за круте роз'яснення threejs
Hello there, we need to ask some questions regarding the implementation of the code, there seems to be an error. If you would be so kind, please drop your email so we can address some queries. Thankyou
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
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.
Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏
Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.
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.
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
Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка
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
If importing an using the useProxy hook cause you troubles, use instead the useSnapshot hook ;)
Awesome Tutorial!! I hope you will make more tutorials using react three fiber.
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.
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 man... I'm on vacation, please don't stop hahahah
Спасибо Юрий!
Коротко и очень информативно! Наверняка много усилий было потрачено на его создание спасибо тебе большое за это! Это топ контент.
This video is useful till this date, I came here after recommendation of Olivier Larose and man you are awesome. Love from INDIA !!!
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 😭
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:' )
Thank you so much, great video explaining everything in detail. Really helpful for beginners like me
awesome would love to see `how to use fragment and vertex in react-three-fiber this avoided me to work with it`
Why do you use a proxy instead of just using useState?
wondering this too.
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
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
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?
крутой видос) спасибо. Побольше бы r3f роликов
Yes! More React tutorials Yuri! 🔥🤘
can we change the properties of the Shoe from outside the file..using reflection..without changing the generated code.
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 )
Thanks ...can you try changing with textures and not colors
hey man thanks for the video, next video can you do this? dt.in.th/ when you click boxes animation starts and redirects to you.
It looks great, how could it be done so that it also works with augmented reality? What code should be added?
thank you Yuri, you need to put the applause button
Good stuff as always Yuri, more react-three-fiber in the future please)
how to show up a dialog/popup box once we hover over the model parts? Could you please help
Great tutorial, I used my 3d shoe design and this configurator made it look dope.
respect++;
Thanks for the tutorial! Can you also adjust the size of the components (example: make the laces bigger)?
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
Thank you Yuri that's amazing !
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
Very nice tutorial. Thank you.
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)
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
Lighting for web - tutorials please!
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.
Ни что так не мотивирует учить английский, как твои видосы) очень круто!
Thank you! You saved my day!!!
How can i paste an image on mesh side in glb model?
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
pls give me tips to make it work in react native.
Thank you so much. You are the best
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
I am getting this with drei 5.00 when I downgrade to 4.18 I am getting different erros
Error when converting '/node_modules/@react-three/drei/web/Html.js' esmodule to commonjs: this[e.init.type] is not a function
Error when converting '/node_modules/@react-three/drei/core/softShadows.js' esmodule to commonjs: this[e.type] is not a function
Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)
Спасибо!
useProxy is not working
Very useful tutorial, thanks.
how can you zoom the image?
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 ()
… and he didn’t say adidas once
Отличное видео!
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?
Brilliant! 🔥🔥
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
This guy is a G!
все круто, як завжди, можна і хайпанути на наступному стрімі, www.cyberpunk.net/ua/en/, а саме: розібрати світчер гліч картинки, дякую Вам за круте роз'яснення threejs
а я там не знайшов такого :( а де саме?
знайшов :) дякую
Yurii, have a lovely Christmas / New Year!
Hello there, we need to ask some questions regarding the implementation of the code, there seems to be an error. If you would be so kind, please drop your email so we can address some queries. Thankyou
Great video, spasibo Yuri :)
I never used Three.js or React.js before but this tutorial was so good I was still able to follow it!
its magic
Thank You!
Would love to connect !
Warmest,
Kai
суперкруто! дякую за відео)
awesome
@Yuri could you guide me on how to achieve this in React-native expo project?
I loved this tutorial 😊
thanks, great job
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
Great tutorial, like everything from you, Yuri.
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.
Holy shit, such a good video, awesome job. I was struggling with 3js and textures / lightning coming out of blender
How can I show hex color numbers on input field ?
Yuri, more React Three Fiber tutorials please! 🤗
Wow, tanks!
Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏
is it possible to change the scale of the object like changing the color of the object???
Is it possible to paste and image in an GLB file?
textures could be included in .glb
good
great tutorial! but i'dlove to add texture such as images and text to it, is that possible?
thank you so much hands down the best tutorial on earth looking forward for more react base tutorials
amazing, I love hearing your thought process on your videos! "make it beautiful"~
🔥🔥🔥
Just awesome!! 🔥
You're a gem for posting these tutorials, wanna be like you brother, hopefully I will one day ❤️
Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.
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.
Great video! Thank you so much!
Does a three.js developer need to know how to model im blender as well?
This untie the knots in my mind. Now I can sleep peacefully.
Круто!!!!
Hey Yuri! Awesome video. Is there any specific reason why we are doing state management using valtio instead of the default react hooks ?
Ну раз в react залезли, надо еще и typescript начать использовать )
Awesome. Thanks a lot for this tutorial.
Yuri , Are you okay?
Kind of! i hope i will be back soon with new streams.
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
Dude I've been doing this for like 6 or 7 years now and that might be the coolest animation I've ever seen
Love the tutorial, You rock Yuri!
Amazing, please make more videos on three js
Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка
mind blowing dude.. Awesome!!!
Amazing tutorial, can't wait to rebuild this with some of our 3D-Models!