[ TUTORIAL ] ModelViewer Tutorial - Threejs
ฝัง
- เผยแพร่เมื่อ 15 ธ.ค. 2021
- In this video I share some of my experience with ModelViewer and Three.js to build a product demo quickly and easily. If you find it useful, please share and like it.
Like link here: rava-cycle-neotix.glitch.me/
Gracias Anderson! super útil!
Beautiful work
Thank you very much ✌️
Awesome man, didn't know it was this easy using model viewer... especially with the editor. One thing that happened with my model when I input it into model-viewer editor is that my base colour and materials weren't imported automatically, like it seems yours was. I am quite new to blender so I am guessing it's something I've done, or not done, that end. Anyways thank you for making this tutorial, super helpful 😀
Hey Rab. Thank you for your visit. This model viewer is really easy. I'm planning to have more tutorials on this soon.
So, maybe your model is using unsupported shader nodes in blender. The gltf export pipeline kind of converts shaders, but not all of them. The ideal scenario is to use only solid colors or textures. For example, if your model uses an advanced color shader, like a fresnel, it won't work. There is another tutorial I followed to get the best results in gltf authoring pipeline. Let me find it and I post it here as a reference for you ✌🏼😊
th-cam.com/play/PLvdhJ__UbhZ6mst0xgd_S3oSmdRcEiKCp.html
This is the tutorial I talked about. This will teach you how to master the blender gltf export process. Watch it all before starting, okay? Grab popcorn and watch it with calm and then you can try it on your model 😉 . If you intend to do the exporting process at the same time, as I did, you may end up missing important parts of it 😁.
@@AndersonMancini That's no problem :D Ahhhh that makes sense, guessing I could bake them then... Ahh legend thanks for the link haha yes I will calmly watch all of it before trying. It would be great to see more tutorials on model viewer. I was thinking about getting verge 3d but, as I am mainly doing product models, I think maybe this will work well for now 😀 Looking forward to taking a loot through your other videos!
Muito top
That's cool tutorial. Could you please make an video about moving the camera as smooth as video.
Do you mean, when click, the camera goes smoothly to a target position? If I understood it right, you can use this tutorial. This guys explains way better than me ;): th-cam.com/video/Slf1KhqOwks/w-d-xo.html
That looks great! I'm currently working on a 3D ArtGallery based on Blender. If I import my project to threejs and do what i just watched on your video, would I be able to select any artwork and add this animation? I'm stuck on "how to get the artwork description" for each artwork. All of this running on wordpress. 🤯
Hey. Thank you very much for your kind feedback.
Yes you can. The way i would approach this would be creating custom id as a custom prop on blender for each artwork mesh. Then, on threejs, you can use a raycaster to get the custom prop on hover or click and then use that id to bring the data from wordpress.
You can also use annotations to match the artwork position on 3d space projected into htnl and use these points to trigger wordpress data.
Here is an example: codepen.io/Lorti/pen/Vbppap
Hope it helps
@@AndersonMancini thanks for your reply! I’ve actually worked on my 3D Gallery, setted the background image (sky) and the colour space setted to row and all works perfectly fine, but once I check the gallery from web it looks very dark and without background image. There is any setting that I need to add on the back/front end?
@davidefacchino2564 I guess your envmap is not loading. You might have to check the console errors and correct the path or permissions ✌🏻😊
@@AndersonMancini Wired... even if i check the GLTF online (gltf viewer) is all dark and without background so i thought was something related to export the file in a wrong way...no idea
@davidefacchino2564 the background is a property of the scene, not of the gltf file. So, you need to change the environment and the background inside threejs okay?
Hello. How did you make the camera transition when you pressed the button?
Hello there 👋
I'm using the same code on this page : twitter.com/hybridherbst/status/1466442170907467779?s=19
You can see the guy explaining how it is done and go to his page and look for the source code so you can use the same function to animate the camera ✌🏻👍🏻
Perfeito! Só achei que as copy do hotspots estão mal aproveitadas, a força poderia ser na catraca traseira, a segurança nos freios e a precisão no garfo. Fora isso, P E R F E I TO! Ah, depois de adicionar a bike e o view, você finalizou o site com js, html e css?
Opa. Desculpe a demora no retorno. Obrigado pelo feedback. Foi isso mesmo. O resto todo é html e css bem padrão. Um abraço.
Is there a way I can integrate this into my Wix page? Thank you for sharing this knowledge!
Hey there. Yes. You just need to embed the code there, as you do with a youtube video embed. If you check the documentation you will see examples of how to do it, okay? Thanks for your kind feedback 👍🏻
Hey I've just recently discovered model viewer and I have a question - a have a 3d model in gltf/glb Format that i want to use but its size is over 30-80mb. I tried resizing it but it is still large to render for regular users. Any suggestions how to improve loading speed or reduce its size? Thank you
Hi there. So, with this fireside, it can only be one thing: textures. Experiment using the model without any textures to see what happens. Then, you can use tinypng.com to compress all the textures and reduce the size to 1024 or 2048 😊
@@AndersonMancini For now i only used Photoshop to reduce image quality (in textures folder) while keeping the same resolution because I'm afraid lowing the image resolution would break texture placements.
Even with compressed textures the problem still remains as the main scene.bin file usually has large size. What should I do with this file? I tried other models that have 1-5mb size max, but they don't serve my needs. Maybe there is some kind of caching tool to reduce load times I'd like to know how other developers handle this issue
You can reduce the file size if you keep the proportions the uvs will not be misplaced. Because is hard to imagine a model in glb format this big. Are you using draco compression on this? For me it works perfectly. I get 25mb file reduced to 2 5mb sometimes.
@@AndersonMancini thank you, I'll try Draco, maybe this will solve it. I wrote a detailed reply with links but I think it was selected as spam and Hidden for review 😅
@@Firzj Optimize your scenes with something like QuadRemesher. Texture maps are not a big concern in this case. Cull(Remove manually) any faces that cannot and are not intended to be seen in the viewer.
this is so awesome !!! but i got lost at 2:36 dont know how to get the code into the html website i am new to this. can you explain this bit.
Hi Javier. Thank you for your feedback. For sure.
When you make changes, you can see some code changing in the upper part of the page. When you open the code of this page, you can replace the parts of the code with your own. If you want, I can make a video call with you to explain. Please send me your email so we can make an appointment, okay? Have a great coding ✌️
Don't forget to include:
@@AndersonMancini I'm trying to upload 3D models, but they don't work.. If I use the model-viewer models they appear, but when I try to import my models all remain empty. I'm going crazy! Can you give an help? Thanks!
@@brandogallo3466 hey there 👋. Maybe your file has some problems or the path is wrong. When you load the file on the editor it works? Do you see any console errors? Please share any error that you see there so I can help you okay? 👍🏻
hi if i do not baked any textures and im using PBR image textures for the diffuse,normal,roughness maps etc, i need to include these image textures jpgs in the three js code if I want to achieve the same level of realism in the webpage render scene yes?
If you export your model using those maps for roughness, metalness, normal etc, your model will be using those textures when you import it on modelviewer. ✌🏻
@@AndersonMancini omg thank you so much for the reply. one last quick question:
If I use PBR textures connected to the Principled BSDF in Blender and export as a GLB, will the texture appearance be consistent in a web scene like it is in Blender, given proper lighting? Do I need to re-add those textures in Three.js unless I want specific manipulations of the map intensity value?
@Bingbangbong28 yes. The blender exporter will keep almost identical results. You just need to configure the lights, the environment map, etc.
I'm always inglês using evee render mode on blender. What you can see there is almost exactly the same you can get with threejs.
✌🏻🙂
@@AndersonMancini thank you so much for the reply sir. you saved me from failing my exam coming up soon on 3d model coding. thank you so much i cant thank you enough
Can you explain how to implement this on a website builder? I have tried so many ways but can't get it to work. I need to upload my .glb file to a hosting website and get a URL from that, but not sure how to do it, since my attempts aren't working. Thanks in advance.
Hey.
Usually, you need to host the glb file externally because those websites builders don't accept this file format. You can also host the entire solution on code sandbox and then load the code from there.
Please search for a diego toda video. He has a great tutorial on how to use react three fiber with webflow that might be helpful
@@AndersonMancini Whoah thank you for your response! I will look up code sandbox and also those videos, I'm super new to coding so I really appreciate your help!
Sir please makes tutorial for three.js and GSAP. Please sir
How did you changed the background color
of the scene
I'm actually changing the color of the html document once the modelviewer is transparent by default.
@@AndersonMancini Thanks for fast reply, haha, figured out that we can change the background of model viewer element through CSS
😁 I was on vacation hehe. Just got back now
Do you mind showing a example with alpha channel?
Do you mean removing the background?
Que massa
Obrigado Edu :)
can we add menu to change the material colour?
Hey there. Yes, you can. I just did this implementation here: neotix.com.br/vitrine-virtual/. You can take a look at the source code to see how it is done, okay? I'm planning some specific tutorial about it. But meanwhile, you should check nik lever tutorials about model viewer. He's doing an amazing job on his channel, okay?
Thank you for your visit ✌🏼😁
@@AndersonMancini thanks alot man
May I know how you zoom in and out on click?
There is a function that I created to move the camera to a new position on click. The source code of this project is available here: glitch.com/edit/#!/rava-cycle-neotix
@@AndersonMancini Wow thank you! I am sure it will be another great video if you can demonstrate how to go about using this script. Once again thank you!
This possible to use from 3Dmax .
Yes it is. I don't know exactly how to export glb from it but I'm sure it is capable
Beautiful work
Thank you Jürgen