3D model configurator with React Three Fiber and gltfjsx
ฝัง
- เผยแพร่เมื่อ 19 มิ.ย. 2024
- Huge thanks to Poimandres team and Paul Henschel, who made this video possible. Im just showing result of their work!
Demo: codesandbox.io/s/floating-sho...
Repo with code by Paul: github.com/drcmda/floating-shoe
All repos are under github.com/pmndrs/ company, support them:
Valtio: github.com/pmndrs/valtio
Drei: github.com/pmndrs/drei
React Three Fiber: github.com/pmndrs/react-three...
gltfjsx: github.com/pmndrs/gltfjsx
Support me: / allyourhtml
Twitter: / akella
Timecodes:
00:00 How to bring your 3D model into react environment
06:58 Using Valtio for state management
09:36 Events on GLTF object
14:05 Colorpicker
19:00 Making nice scene
#react #gltf #threejs #r3f
Yuri, you are one of the good ones. Thank you for all of your hard work because these tutorials are priceless!
Спасибо Юрий!
Коротко и очень информативно! Наверняка много усилий было потрачено на его создание спасибо тебе большое за это! Это топ контент.
Amazing tutorial, can't wait to rebuild this with some of our 3D-Models!
Dude I've been doing this for like 6 or 7 years now and that might be the coolest animation I've ever seen
Awesome Tutorial!! I hope you will make more tutorials using react three fiber.
amazing, I love hearing your thought process on your videos! "make it beautiful"~
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
Such a great tutorial! Thank you so much for taking time and helping us with your clear explanations :)
Good stuff as always Yuri, more react-three-fiber in the future please)
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.
Ааа, Юрий, спасибо! Смотрю тебя ещё с 2015 года с конференции, где ты рассказывал про ускорение вёрстки. Огромное тебе спасибо ещё за тот доклад и вообще за то что делишься своим опытом. Тогда меня сильно ускорили в работе твои советы. Так что спасибо ещё раз! :)
Спасибо!
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
Ни что так не мотивирует учить английский, как твои видосы) очень круто!
Yes! More React tutorials Yuri! 🔥🤘
Бачились з вами більше року тому в Житомирі на конференції - хочу вам подякувати за вашу працю! Саме ви мене надихнули навчатись і це допомогло мені не полишати свого хоббі. Дякую - вам.
Great tutorial, like everything from you, Yuri.
You're a gem for posting these tutorials, wanna be like you brother, hopefully I will one day ❤️
Great tutorial, I used my 3d shoe design and this configurator made it look dope.
respect++;
Yurii, have a lovely Christmas / New Year!
Holy shit, such a good video, awesome job. I was struggling with 3js and textures / lightning coming out of blender
thank you so much hands down the best tutorial on earth looking forward for more react base tutorials
Thank you so much, great video explaining everything in detail. Really helpful for beginners like me
I never used Three.js or React.js before but this tutorial was so good I was still able to follow it!
Thank you Yuri that's amazing !
Блин ооочень круто , спасибо за материал ! Я только недавно начал учить three.js по курсу Bruno Simon у него отличные уроки по базовым знаниям , а у вас отличный пример как это все можно применять в реальных работах. Круто Лайк Подписка
Love the tutorial, You rock Yuri!
Very useful tutorial, thanks.
Just awesome!! 🔥
mind blowing dude.. Awesome!!!
This untie the knots in my mind. Now I can sleep peacefully.
I loved this tutorial 😊
Amazing, please make more videos on three js
Great video, spasibo Yuri :)
Great video! Thank you so much!
Very nice tutorial. Thank you.
Awesome. Thanks a lot for this tutorial.
суперкруто! дякую за відео)
thank you Yuri, you need to put the applause button
Thanks for this, good vid!
This is amazing!!!!
thanks, great job
Thanks for the tutorial! Can you also adjust the size of the components (example: make the laces bigger)?
крутой видос) спасибо. Побольше бы r3f роликов
Thank you so much. You are the best
Very nice tutorial
Oh man... I'm on vacation, please don't stop hahahah
Спасибо, что делишься опытом. Очень мало информации можно найти по 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.
Hey Yuri! Awesome video. Is there any specific reason why we are doing state management using valtio instead of the default react hooks ?
Wow, tanks!
Yuri, more React Three Fiber tutorials please! 🤗
Ну раз в react залезли, надо еще и typescript начать использовать )
This guy is a G!
amazing!
If importing an using the useProxy hook cause you troubles, use instead the useSnapshot hook ;)
awesome would love to see `how to use fragment and vertex in react-three-fiber this avoided me to work with it`
Thank you
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.
It looks great, how could it be done so that it also works with augmented reality? What code should be added?
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.
🔥🔥🔥
Спасибо - интересно и полезно
Круто!!!!
awesome
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 )
Would love to see a tutorial for setting up the blender file
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
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.
Thank You!
Would love to connect !
Warmest,
Kai
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
Отличное видео!
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?
oh my.. YURI IS THE BEST
great tutorial! but i'dlove to add texture such as images and text to it, is that possible?
its magic
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
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
good
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.
@Yuri could you guide me on how to achieve this in React-native expo project?
is it possible to change the scale of the object like changing the color of the object???
can we change the properties of the Shoe from outside the file..using reflection..without changing the generated code.
Thanks ...can you try changing with textures and not colors
how to show up a dialog/popup box once we hover over the model parts? Could you please help
Lighting for web - tutorials please!
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 😭
How can I show hex color numbers on input field ?
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?
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 paste an image on mesh side in glb model?
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 can you zoom the image?
Юрий здраствуйте сделайте видео, расскажите как новичку в разработке верстки с чего начать учится, какую то последовательность основывать, информации очень много на сегодня, и уже каша в голове. Как бы интересно как можно достичь таких же знаний и набраться опыта как у вас? Может у вас есть какие то курсы? Смотрю ваши видео и вызывает восхищение, хочу освоить те же знания, совсем не давно я узнал о html и css, сегодня уже так ни кто не работает запускают стартера, работают с gsap three и что такое gulp) В общем вопросов много! 🙏🙏🙏
pls give me tips to make it work in react native.
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:' )
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
Which IDE are you using?
in this video its codesandbox.io/, but i am usually using VSCode or Sublime
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
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.