Ever wonder how do other developers manage to put 3D objects on their websites? The same question crossed my mind when I saw some fascinating websites like Yamauchi No10 family office, Life in Vogue, and uxblonde. They are all absolutely mind-blowing websites, and I definitely want to know how to achieve something like this. After some research into this topic, it can be accomplished by using Blender and Three.js.
According to Wikipedia:
Blender is a free and open-source 3D computer graphics software toolset used for creating animated films, visual effects, art, 3D printed models, motion graphics, interactive 3D applications, virtual reality, and computer games.
Three. js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL.
With these two tools in hand, you will be able to start your journey on 3D modeling and have your desire object render on your website.
There are two options to get the 3D object that you want:
- The first option is to create your own object in Blender and export it to Three.js as a gltf/glb type file, and have the object rendered on your website that way.
- The second option, which is the easier one, is to search on google for the specific 3D object that you are looking for. Make sure it is saved with the right format, as there are hundreds of formats out there. Lastly, import the 3D object to your Three.js file and have the 3D object render in your way.
I will need to do more research and dive deep into the world of 3D modeling before I can provide any insights and walkthrough on this matter. I’m excited to learn more about this field and hopefully, I will be able to share my knowledge with you all not too far from now!!
Have a good day everyone!! 🥰 May you all will have success in creating your most fabulous 3D object in the world!
