Embedding Sketchfab in iBooks

I am Emily McDougall, a Medical Illustrator and Animator and I have been developing 3D Sketchfab models to enhance the teaching of the dental curriculum at the University of Dundee. As part of the development of learning resources we have been using iBooks as they have the capacity to embed COLLADA (.dae) files so that the users can interact freely with the models. The problem with this was that the more complex the model, the larger the file size! The iBooks became unusable the more complex the models were getting. Using Sketchfab was the ultimate solution to the problem as not only could we display larger models on the devices with an internet connection, but we could also animate these models to show the mechanics of jaw movement and dental procedures. I did some research into how to embed the HTML into the iBooks and would like to share my solution with you. You can use this to showcase your own Sketchfab models in a portfolio or instructional document of your own!

For this tutorial, I will be using a Mac with iBooks Author and iAd Producer installed.

You can download this entire tutorial, including a Sketchfab embed here.

Creating a Widget in iAd Producer

In this part I will explain how to download iAd Producer and create a Widget file for import into iBooks Author.

Sketchfab models can be embedded on different web pages and platforms easily through html code. However, Apple iBook Author/iBooks do not support the embedding of html code directly. The work around for this is to use Apple iAd Producer to create an iBook Author Widget file (.wdgt). This can be downloaded from the Apple Developer site.

Once this has downloaded, open iAd Producer and you first need to select the iBook Author Widget button:

You will be given some options (see above), select the HTML box. Then double click thebox twice to open up the html code input box.

Go to your Sketchfab model and click embed. The Embed Viewer will then open. You can copy this code or, for more options, click on show options.

Options such as Autostart, Animated Entrance, Preload Textures and Turnable Animation may be useful to you for your iBook.

Checking the Preload textures box means that the 3D object will not display until the textures have been loaded, this will make your model look its best and avoid the textures looking pixelated before the object is fully loaded.

Paste your code directly into iAd Producer in the HTML window it may not be in the position you would like and it may also be the wrong size.

You can change the size of the html by changing the values in width and height. Good dimensions for having the sketchfab model fullscreen are width=”1000” height=”700”.

To centre the html add align=center into the <div>.

For example, you can begin your code as follows:

<div ALIGN=CENTER><iframe width="1000" height="700"

Alternatively you can click and drag to position the html window on the page, however using code can maintain consistency if you are embedding many models.

You should now be ready to save the Widget. Save the iAd file by clicking File>Save As… and then save the widget by clicking File>Export to Disc.

Import Widget into iBook Author

In this part I will explain how to easily import your widget (.wdgt) file into your iBook.

In iBook Author, go to the Widget button on the top bar and click HTML.

Here you can choose your .wdgt file in the HTML5 option and place it onto your page.

The Widget will appear like this. You can, however, drag and drop a new image onto this.

There is an option to preview your widget when you place it on your page. Now when you publish your iBook, you will have your 3D creations embedded in your digital publication for all to see!

About the author