Scientific illustrator Mieke Roth has an international reputation for her meticulous attention to detail. In her search for a better medium to communicate information, she has developed a custom web application on top of Sketchfab. In this post she explains all the steps that allow you to recreate it.
Get more out of your 3D models!
I love making (biological) 3D models. It is fun, the base of the work I do for clients, I use them in my illustrations, and it is great to display them as a portfolio on Sketchfab.
But just having 3D models for display it isn’t enough, is it? And I don’t do games – yet.
Luckily the use of Sketchfab isn’t limited to that. In fact, you can make rather fancy applications with Sketchfab. Since I really love to see people make more use of the real possibilities of 3D online, here an easy tutorial on how I made the application I used for my post on the sex of ducks (link opens in a new tab).
The whole (standardized) application is available as a zip-file here.
Here the application I made for the post on the sex of ducks, so you have an idea on how such an application looks and works. Underneath the model, that is already active, you can click on tabs that are linked to the annotations within the model. The model moves accordingly when you click the tabs.
There is only one file within the application you have to worry about for now, the rest is scripting and layout. I named that file “viewer_app.html”. In this file I added some explanatory text so you don’t get lost. But first things first, we start with the basics:
Adding the application to your website
You need a few things to be able to add the application to your website:
- A Sketchfab account with a 3D model you want to display in the app
- Your own website
- A possibility to upload separate files and folders to your website
- A little bit of HTML knowledge and an HTML editor
That’s it. Now you can unzip the application and start working on the content.
Making annotations in Sketchfab
But before you can work on the application itself, you need to have a model with annotations to display of course! So, you have an account. Now you start with uploading a 3D file. If it is uploaded you then can make modifications to the model. There are a number of modifications you can make, for example:
- Change the 3D settings. Here you can change the field of view, post processing filters, the background, the materials used on the model and the lighting and a number of other things
- Add annotations. Annotations are easily made. You rotate the model so that you have a clear view on the point on the model you want to have annotated and then you click on that point. A box opens that enables you to add content. For this application I most of the time only add a title because I use the application to add additional information.
If you are done with the model you safe it and publish it so it is viewable for the rest of the world.
The annotations are numbered in the order you see them in your dashboard. These numbers are similar to what you will see in the viewer_app.html you have to edit for the application to work, so everything is rather strait forward.
In the application you will see some folders and in the root one html file.
This file, viewer_app.html, is a snippet. So it needs to be embedded into another html file. The easiest way to do that, so you don’t have to worry about messing up things by entangling all the html, is to use an iframe. That is just one line of code:
<iframe width=”100%” height=”500″ src=”viewer_ app.html”></iframe>
You can change the width and the height to anything you see fit of course. And the name of the html file according to the content. The reason for the use of an iframe is that you always have your application separate from your other content. If you want to change something in the future, this will make everything a lot easier.
For WordPress users: for most (older) themes you need to use a plugin to be able to use iframe. On this page you will find the best and most recent.
Changing the code
Within viewer_app.html I added accompanying text so you don’t get lost within the file. The text pieces are recognizable by this start and finish: <!– text –> . Since there is also other text in there that will be helpful if you want to dig deeper, I added numbers to the text that matters now.
Of this text, numbers 1 till 3 are the most important.
Here is where you add titles to the tabs:
And here’s where you add HTML content to the tabs:
To initialize your application you need to add the ID of the model (for example the model of the reproduction tract I used in my post about the sex of ducks is the last piece of this url: https://sketchfab.com/models/33bdf5055004465aaceb09cc431a42fb you want to display. )
Finally, you need to connect your tabs to annotations:
Uploading to your website
If you are done adding annotations to the model and content to the application, you can upload the folder with the application to your website and add the iframe code, with the correct referral to the viewer_app.html (or whatever you named it), to the page you want to show the application on.
And that’s it! I would love to see what you made with it! The moment I add a different kind of application to my website, I will work on a next tutorial so you can add them too!