<<< Go back

March 31, 2023

Added Support for 3D models in Blog post

Hello! In my free-time I have been spending a lot of time working in CAD software and creating 3D models to fix my real work problems using a 3D printer. I would like to showcase the work I have been doing here on this website but there is no straightforward way of showing 3D models unless I just show an image. I would like to give my viewers a more interactive experience than that.

I also know quite a few mechanical engineers and industrial designers that would love to have this functionality on their websites as well.

After watching this youtube video. I thought that Three.js might be the solution for me.

Looking further at their example, it looked even more promising for me that this could be a solution for my problem. (https://threejs.org/examples/#webgl_animation_keyframes)

Screen Shot 2023-03-31 at 6.01.09 PM

I also found a page in their docs that showed how to load 3D files like STL into three.js (https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models). So it made this look really promising... I was able to load a 3D modal with in a few hours likes this one:

Loading...

Okay, Cool! I can now see 3D models in a web browser. How do I hook them into my CMS, Wagtail?

After reading these docs page from wagtail I was able to figure it out

BOOM!

Custom STL loader to load my STL files into my blog!

Screen Shot 2023-03-31 at 6.12.49 PM

(Bonus STL for you)

Loading...

CB8DDE3F-6FA6-4599-870D-A43CC6C62230

Josh Martin

Full Stack Engineer

Chicago, IL

Josh is a software engineer and consultant. He writes software in Go, python, javascript. Additionally, he has experience writing using Django, React.JS, React Native, Vue, Kubernetes, Docker.

Hire him as your next Consultant or New Hire!