Introduction (completely optional to read, If you're too lazy 🥱)
Hi there! Long time no see! I must confess, I haven't felt the urge to write anything here for a while now. Maybe it's because I've been caught up with my own projects, or perhaps I've just been feeling a bit too lazy to put pen to paper. But actually, that's what sparked this idea. I've realized that reading through a lengthy article from start to finish can be a bit of a drag, and that's why people tend to prefer watching videos instead. I get it - I've been there myself many times. It got me thinking though, is there a way we could cut through all the fluff and get straight to the heart of the matter? As programmers, we often face challenges and constraints that we need to solve, and I think we could benefit from a more direct approach. No more wading through junky articles and endless videos - let's get to the point and solve those problems! 💪
As this becomes the first article to be written in the Lazy tutorial series, I hope this lets you find what you're looking for, faster.
I'm not gonna explain all the code I'm gonna write here (75% of it is self explanatory - besides, I'm writing this for those who don't have the interest in wasting their valuable time learning all that they do, but rather in finding a quick solution for the same 🙂).
1. Loading the 3d model:
Here I've used the <model-viewer> API for loading and rendering the 3d model:
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.0.1/model-viewer.min.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer alt="Write a cool description about your 3d model." src="your_models_file_name_or_path.glb" ar environment-image="the_background_hdr_optional.hdr" poster="poster_to_be_displayed_before_loading_model.webp" shadow-intensity="1" camera-controls touch-action="pan-y"></model-viewer>
Obviously, it's important to change the source of the 3d model (src), the environment image file path (hdr, optional), and the poster (again, optional) to load the 3d model on your web page.
Here's the link to the API's docs just in case you wanna go further: ModelViewer.dev
Conclusion
That's it! This tip should have helped you load your own 3d model into your web page/web app... If so, do gimme your feedback in the comment box - If not, feel free to add any suggestions in the same spot - Happy Coding! 🥱💥
Top comments (0)