Added Support For 3D Models In Blog Post
March 31, 2023Hello! 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.width-800](https://storage.googleapis.com/images-for-cms/images/Screen_Shot_2023-03-31_at_6.01.09_PM.width-800.width-800.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=fileuploads%40com-cjoshmartin.iam.gserviceaccount.com%2F20240725%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20240725T232300Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=5160832ef90957df2f8c64b56e52ac959edc3f52d7080495937dc8439452c37f2ff0368fd708a10f8e975bac22e61fa57fb1acbb8a7032542d827f990cf209aafaeaae38b114505fdc1a8b531fe61c513964253869da898970baf92235a114a9f90d1abd082319ccc7d13c869103bd8aa85dc992d1a4490cf7e06472bfe0588a2063090b4835367a22551949c2dd0f0ddde09541f9cd84e71c3afd5645f0cfec41963adf6ef144166576897f2a17e1ac53b06927d7e374390fb6df59bc1b68441a7e24da5483bb14be4c421e53e1a88bb9308a55c798660c23f8567f9a21d1861d2ab4fad123624607290533b488a3b170220d6242bbfef1a7bb130d445908a2)
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:
(click and drag to see around the model)
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!
![Screen_Shot_2023-03-31_at_6.12.49_PM.width-800 (1)](https://storage.googleapis.com/images-for-cms/images/Screen_Shot_2023-03-31_at_6.12.49_PM.width-800.width-800.png?X-Goog-Algorithm=GOOG4-RSA-SHA256&X-Goog-Credential=fileuploads%40com-cjoshmartin.iam.gserviceaccount.com%2F20240725%2Fauto%2Fstorage%2Fgoog4_request&X-Goog-Date=20240725T232300Z&X-Goog-Expires=86400&X-Goog-SignedHeaders=host&X-Goog-Signature=61cee4fb0c6f71e64e623bbf29cd8cf66901b764de5d802ebe4dd92eb9b57bc06bb47b04bddeaa5bf296910b4e96c1982194da7475e511eb351303ee5c82178c38e6a190a4a8c2954bff499db4cee33732daebb577b85ddd9e80846b89a55c84c6eb11f4022438643182e84ea19411d022a4473be9e860e83dcf4153e250d15812693e4dd8011d764497f95010f6e6308ee5c6e7d32b1c37dae1c1c0f97d5301fa901e19b26229a474b77aa29022de3bba0373a83fbefa1e075de00b57305a15217710955673ef264cde8d657cffcda8713f5698fe39766799bc48fb8238da9bfff424ddc3f16a25d4fe9456558d1c19ad015d0cd1fa3579c57bd9d528607032)
(Bonus STL for you)
(click and drag to see around the model)
Josh Martin
Full Stack Engineer and Maker
contact@cjoshmartin.com
Hello, I am Josh, I am a full-stack developer specializing in developing for Web and Mobile in React, React Native, Node.js, and Django. I used to work at Amazon in the advertising sales Performance department as a Frontend Engineer...
I have a degree from Purdue University in Computer Engineering with the use of my degree and passions I can offer support more than just Web and Mobile development. I can assist with any need related to hardware integration with internet-enabled devices or design needs in CAD and manufacturing.