Do you know if its possible to edit materials inside glb files that have been converted by gltfjsx, I would like to use a glb file that I have used with gltfjsx but assign materials to the objects inside that glb file with materials I create and can reuse. Hopefully that makes sense.
Definitely possible! Change your material of your generated gltfjsx code by changing the material property of a mesh (sorry for bad formatting, TH-cam comment don't support code snippets) : or by adding the material as a child of the mesh: Once you did this, use the GLTFExporter from three.js (threejs.org/docs/#examples/en/exporters/GLTFExporter) to export your new model as a .glb file. You can find a great example of this here: threejs.org/examples/misc_exporter_gltf. It is unfortunately not possible to update your glb file real time in the background, since you don't have access to your file system from the browser. This means that you'll have to download the updated .glb file again after every change you make in the browser.
would I be able to attach an interactive screen (made with react) to a smartphone? my goal is to allow people to simulate my app directly from the browser.
Yeah, file size is important, since it will reduce loading time and the differences between before and after compression can be pretty big. Great idea to make a video about it, thanks! 👍
Thanks Ashik! You want to have a picture of your scene? You'd need to use a separate package for that, or you can just go into fullscreen mode with f11 and take a screenshot 😉
@@jasonduboff8432 I'd suggest you to use this website to convert the 3D model to JSX: gltf.pmnd.rs/ Which is a little bit easier to use than running commands in the command line and it should give the same result :) If you have any questions, just ask them here and I'll be happy to answer them ✌️
Straight gold! This educational content will surely push more 3D on the web
Thanks Ibrahim, that's my goal! Glad you enjoy it 🔥
Keep up the good work, one day you will be big, I hope the best for ya!
Thank you! ✌️
AMAZING! I was looking for this exact video. Short, descriptive and to the point! Thanks! Liked & Subbed!
Great to hear that, thanks! 🙏 More coming soon
Hey and if I may ask, how did you find my channel? Just out of curiosity! 😁✌️
@@threeveloper Black magic googling... hahaha.
@@rccowboys amazing, thanks! 🙏
Thanks for this and all other videos in your channel
concise and straight to the point, I dig your content keep up the good work :-)
Thanks a lot! 🙌
amazing keep it coming more tutorials with some projects
Thanks! ✌️ Projects will come after I handled the basics 🙌
Thanks ❤️♥️♥️♥️
Haha, enjoy! This is only the beginning 🎊
i have some problems to import model 3d in video format, any tip?
Hi @strongert1, what do you mean with importing 3d model in video format?
Great video ! Thank you. Can you please consider doing the same video but adding a custom shader with model like the kiwi ?
Custom shaders will be handled yes! But maybe in a bit different format :)
Do you know if its possible to edit materials inside glb files that have been converted by gltfjsx, I would like to use a glb file that I have used with gltfjsx but assign materials to the objects inside that glb file with materials I create and can reuse. Hopefully that makes sense.
Definitely possible! Change your material of your generated gltfjsx code by changing the material property of a mesh (sorry for bad formatting, TH-cam comment don't support code snippets) :
or by adding the material as a child of the mesh:
Once you did this, use the GLTFExporter from three.js (threejs.org/docs/#examples/en/exporters/GLTFExporter) to export your new model as a .glb file. You can find a great example of this here: threejs.org/examples/misc_exporter_gltf.
It is unfortunately not possible to update your glb file real time in the background, since you don't have access to your file system from the browser. This means that you'll have to download the updated .glb file again after every change you make in the browser.
would I be able to attach an interactive screen (made with react) to a smartphone? my goal is to allow people to simulate my app directly from the browser.
I'm not sure if I understand your use case 😅 Could you elaborate?
Great tutorial! Is file size an issue you consider with the models? If so, can you make a video on managing model file size? Thanks!
Yeah, file size is important, since it will reduce loading time and the differences between before and after compression can be pretty big. Great idea to make a video about it, thanks! 👍
Amazing work.Could you pls tell me how can i save this file as a png?
Thanks Ashik! You want to have a picture of your scene? You'd need to use a separate package for that, or you can just go into fullscreen mode with f11 and take a screenshot 😉
@@threeveloper which package? I am struggling to find
@@ashikrabbi4300 here's a link to someone asking the same question. You could try out those packages :)
@@threeveloper where?
@@ashikrabbi4300 whoops! stackoverflow.com/a/46243263 😄
3d model dosnt have any textures
That depends on which 3D model you were using. Did you copy over the textures in the directory as well?
gltfxjsx is unsupported with node v18
Oh that's good to know! By now it's probably more easy to use the web version anyways since it also supports types now and some other options 😉
@@threeveloper yes indeed
@@Alex-jw1np how would you do it now? I'm trying to get my donut in the browser T_T
@@threeveloper How would you go about this now? I'm a total noob. Would greatly appreciate any help!
@@jasonduboff8432 I'd suggest you to use this website to convert the 3D model to JSX: gltf.pmnd.rs/
Which is a little bit easier to use than running commands in the command line and it should give the same result :)
If you have any questions, just ask them here and I'll be happy to answer them ✌️