embedded 3D model viewer

Written By Samuel .

mini vent

*taking a short break to dump my thoughts while building this website* 😪

When editing this website, I initially thought that having bought a subscription to a website builder, simply dumping my photos and videos into pages would be simple. What I didn’t expect was the amount of features I realised were lacking from what I assumed were basic customizations. e.g. Adding captions to the pictures, styling said captions, adjusting the captions to fit on different screens properly (mobile and desktop). If I’m already going to edit so much CSS code, I’m better off just doing everything on my own (?) Definitely going to try out Google Sites or something much simpler next time to see if there are really that much more features here.

edit: there’s so much more I’m realising I have to do by myself, and I just wanted to list it all here as I go on:
- caption styling
- custom device layouts
- syntax highlighting (since the code blocks here are so limited and it’s a premium feature)

embedding the 3d model

Anyway, one thing that I really wanted on my website was being able to display 3D CAD models in a nice way. I recall a few years ago I was able to import 3D models into my powerpoints. It’s 2023, websites should feature cooler visuals! 😉

A quick google search led me to vectary.com, which claimed to be able to allow you to upload 3D models so that you could embed them into your website. To me, it sounded perfect. However, upon uploading and testing it out, it felt so clunky and worst of all, it required a subscription to remove watermarks and etc… Knowing how amazing the world of open source can be (looking at you ROS), I ventured deeper into the web to look for an alternative.

Enter model-viewer! The demo on it’s website looked exactly like what I wanted and best of all, it was free and made by Google! After a few minutes of tweaking around and testing the code, I managed to get a model of the astronaunt.glb on my website. Awesome! Now it was just a matter of uploading my own glb file, linking it to the src code and I’ll be done!

or so I thought…

What ended up happening was hours wasted wondering why my glb file uploaded on github and google drive simply weren’t working. It felt so simple yet it just refused to work. Further searches led me to this forum, where I realised that the source of my problems was this mystical thing called “CORS”. A little bit of reading led me to understand what Cross-Origin Resource Sharing (CORS) was. My basic understanding is that because of security reasons, browsers forbid requests that come in from certain sources. This felt exactly like the classic networking issue with robots, when I connected them over ethernet and due to certain security issues, information just wasn’t being shared. While not ideal, what we would do for debugging is:

sudo ufw disable

just for sanity checks and to get things moving. (also how is it that squarespace does not allow me to add codeblocks with nice syntax highlighting… come on man)

ANYWAY… after I found out that being the issue, I had to seek a place where I could upload the .glb file where I could adjust the CORS policy. The forum recommended AWS S3 buckets but I figured since I had some GCP knowledge, I would attempt to do it in a bucket. After half an hour of messing with the CORS policy, it worked! You can see it working on this page!

Here’s the embedded code: 

<style>
 model-viewer {
    height : 70vh;
    width : 50vw;
    margin : auto;
    }
</style>

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<!-- Use it like any other HTML element -->
<div style="display: flex; justify-content: center; align-items: center;">
  <model-viewer src="https://storage.googleapis.com/lamebucket123/me102b.glb" auto-rotate camera-controls></model-viewer>
</div>

Okay I know ^ this looks horrible and I’ll be finding a way to style these all much nicer… in the mean time, let me complete putting up all my stuff.


Samuel .
Next

about time 😊