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)

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:

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

• https://docs.wagtail.org/en/stable/topics/streamfield.html
• https://docs.wagtail.org/en/latest/advanced_topics/customisation/streamfield_blocks.html
• https://docs.wagtail.org/en/stable/reference/streamfield/blocks.html#streamfield-block-reference

BOOM! #

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

(Bonus STL for you)