Warning

If you use any binary files in a git repo (like an STL) make sure you modify your repo's .gitattributes file (you may need to create it but many init scripts like Vue will do this automatically for common binaries)

.gitattributes

* text eol=lf
*.txt text eol=crlf

*.stl binary

More info can be found at my Blog Post on the subject

While building this website I decided that it would be nice to have 3D file previews for all of the STLs for the projects I am demonstrating. 3D printing makes its way into most projects I work on, typically in the way of an enclosure of some sort, so there are a few STLs on this site.

I found a great example of a custom HTML component that did most of what I wanted from Travis Geis but did not integrate directly with Vue quite the way I wanted but had some great logic for calculating the bounding box and auto rotating the model.

I wanted a version that dealt with the resource management through the native Vue lifecycle hooks and allowed for some configurability via v-binds. I also wanted to use the Three JS npm packages directly for consistency in the build process and portability so I threw this together:

After the Vue file is in place and Three JS is installed via npm i three the component can be used like so:

<StlViewer style="height:300px;" model="/3d_models/3DBenchy.stl"  :flipX="true" :zoomIn=1.5 />

Which would result in the following:

There are still some improvements I would like to make:

• Add more configurable parameters via props (namely color and rotation speed)
• Package for NPM (note: follow this guide)
• Rewrite for OBJ files supporting multi-material assemblies
• Add better rotation controls

Update:

This component worked fine locally but when I deployed it to a host I had all sorts of issues which turned out to be related to corruption of the STLs in the git repo for the project. The diagnosis and fix can be found at the top of this article or at this blog post:

STLs in Git Repos

Copyright

Copyright Ownership:prairielandelec

License under:Attribution-NonCommercial-NoDerivatives 4.0 International (CC-BY-NC-ND-4.0)