Back in February, our video manager Julie Schoonmaker pitched a story about the cardiac 3D printing program at Duke. As a collaboration between the Co-Lab 3D printing team and Duke Pediatric and Congenital Heart Center to create heart models to prepare patients for surgery, our team thought it was important to produce a comprehensive and engaging story to show this important intersection of work between Duke University and Duke Hospital.
This story needed 3D heart visuals front and center. Luckily, we were able to obtain multiple renderings of the 3D heart printing process from Cardiac sonographer Greg Sturgeon. This allowed us to be able to give readers an interactive experience of what the 3D hearts look like, even though they wouldn’t be able to hold an actual model of a 3D printed heart.
One of the extensions of the files Greg sent was wholly unfamiliar to me: .STL. A trip to Google quicky told me it was a file that described the surface geometry of a three-dimensional object, which sounded just like the kind of thing I would need. After scanning through the Three,js documentation and a few web searches that were different permutations of “.STL”, “3D” and “Three.js”, I thankfully found this incredibly helpful tutorial from developer Anthony Biondo that turned out to be just the thing I needed.
After following the tutorial and tweaking the size, rotation speed, and colors of the STL viewer, I had just the thing I was looking for. After realizing I’d be unable to host the code on the same website as the story, I uploaded the code and the .STL file to a separate server so I could put it in the story as an iframe.