A heart in Sketchfab and Squarespace

Recently I’ve finished a project for Alex Brubaker at alexanimation. The project involves a 3D interactive heart and surrounding organs. You can show and hide organs, veins and arteries and even look at a cross section of the heart. In addition you can move the camera to a few preset locations looking at details of the heart. This is a great way to explain anatomy and medical conditions and even point out medical procedures.

Sketchfab

The 3D model was provided by the client. I’ve optimized it to be used in Sketchfab. Within sketchfab I’ve made heavy use of the new sub surface scattering (sss) and translucency features. Both look great on the organs. My only issue with sss is that it creates bad anti aliasing around very thin objects, such as thin veins. I’ve had to disable sss on those objects.

Squarespace

Technically it’s a relatively simple project apart from one challenge: it has to run on Squarespace. Squarespace is a popular website hosting and building platform. While there are many ways to build a site in squarespace it’s a bit of a challenge to integrate the custom code required to interact with the 3D model. By default, squarespace supports embedding sketchfab models, but adding interaction doesn’t work out of the box.

I’ve built a custom javascript library which talks to the sketchfab API. This is what I do for each of my projects involving realtime 3D. This code is inserted into the page with the model. You can use so called “Code insertion” in squarespace for that. Secondly, I’ve added custom buttons and checkboxes which trigger the actions, such as showing and hiding organs and moving the camera. Since these buttons don’t listen to the squarespace theme by default they get a little bit of custom css.

Summary

I was very satisfied to see how smooth the project went. Alex Brubaker was great to work with. Combining Sketchfab and Squarespace works really well too. It’s a great alternative if building a site from scratch is overkill and all you need is a few simple interactions.