Using the Viewer API to Show or Hide Model Parts

About

As one of the 3D Generalist’s on the iExcel visualization team at UNMC we create, in some cases, highly detailed anatomy models that we host on Sketchfab for educational and training purposes.  While it’s great to rotate and visualize models directly on Sketchfab, we also needed the ability to show and hide parts of our models, show the name given to each object from our content creation tools such as Maya and Blender. We also wanted the ability to collapse the objects into treeview relationships to help avoid clutter on the extremely large models. The primary goal is to have subject matter experts be able to reference our models and show and hide various parts for a lecture or training session.   As an example, only seeing the outside of a heart is not as useful as being able to hide aspects of the model.

We wanted this solution to work dynamically so that it “just works” for all our models without, if possible, using any external libraries or having to rely on any special naming conventions of our 3D assets.

Working with the Viewer API

I decided to create a simple HTML page that utilizes the Sketchfab Viewer API that we host internally and generate a treeview based on the naming and relationships of the uploaded model. (Side effect: this reveals all of our poor object naming conventions, as you can see in the screenshot below, pointed at one of my personal projects.)  Utilizing the Sketchfab Viewer API, I was able to process the Matrix Transforms recursively and maintain the parent/child relationships of the nodes utilizing arrays and a hash table.  Now that we know the Instance ID’s for each node in the tree we can easily show and hide any part of the model that we want.

I’m happy to share the generic version of this functionality so you may find a use for it or even help me improve it.

You can see an example of how the app works here.

You can check out your own model or any model for that matter simply by replacing the “id” in the query string with the guid from the URL of any model you want to show and hide parts of.

Also, feel free to fork the code from GitHub and hit me up if you do something cool with it or have improvements!