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.
3D printed pediatric and adult hearts from scans give pediatric cardiologists a road map for correcting the defects in surgery.
I had always been interested in using a JavaScript library to represent 3D objects like Three.js, now I finally had a project that would allow me to do that. My goal was to create an in-browser representation that the user could rotate and explore themselves, but as I’d never done anything of the sort before, the prospect seemed daunting.
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.
Once the iframe was successfully in the story, I was so excited about what I’d been able to accomplish surprisingly easily. But my supervisor Blyth Morrell quickly noted that the interactive needed a click-through overlay so mobile users didn’t get stuck helplessly scrolling through the interactive and not the story – another important reminder that if you spend all your energy making something you think is “cool”, that effort will be totally wasted if it isn’t also user-friendly. Styling up an overlay div with a small click-to-hide JavaScript function fixed that problem handily (although figuring out if that needed to be on the story page or on the server hosting the iframe took a little tweaking). And finally, voila – not quite a heart you can hold in your hands, but one you can explore almost as closely via your internet browser.