3D Models in Moodle
A guide to embedding Sketchfab assets in Moodle
Neil McDonnell, June 2021
Sketchfab is like YouTube except for 3D models instead of videos. There are over 3 million 3D models on there available to view and the database is growing by the day. If you have not visited yet, then go now and get lost for a while...
Embedding
Many teachers would benefit from the ability to use the 3D models available on Sketchfab in their lessons. Here is just one easy example:
Once you click the play button, you can grab and rotate the model, zoom in on it (wheel mouse, or pinch-zoom) and even inspect the details of the model. Try it in full screen for the full effect.
Notice that this is embedded in this page. Thanks to the Google Sites tools, I just had to choose "embed" (with the code symbol <>) and past the embed link that I took from the model's page on Sketchfab (it isn't the neatest here, but I don't have time to explore the sizing options!).
From what I can tell, just about any modern web browser can handle such embedded media because it is using HTML5. No need for flash or java plugins like in the bad old days. All you need to do is instruct the editor that you are not putting in normal text, but code.
VLE Example: Moodle
Virtual Learning Environments are now commonplace accross education, allowing teachers to curate learning materials in a web-accessible environment. It is typically easier to prepare your materials in a VLE than on a standard webpage, and there is a lot of back-end integration into registration and grading systems that make it a vital part of the teaching process.
Embedding traditional media (files, images, videos, audio) into VLEs is commonplace, but wouldn't it be fantastic if we could integrate 3D media too? Well, I discovered today that we can and that is why I am making this page. Here is how I did it in Moodle in all of about 3 minutes.
Step 0: Optional - find a model you like on Sketchfab, and click the <embed> option below the viewer. Copy the text to clipboard. You can skip this and just use the text I put in at Step 5.
Step 1: Create a new page, or edit an existing one.
Step 2: Click the "Show More Buttons" button.
Step 3: Click the HTML code button that looks like this </> so that the text you are putting in is not interpreted, but read directly as code.
Step 4: Do Not Panic that it looks all code-y. Find the end of the last line and click enter to start a new one.
Step 5: Paste the <embed> text. If you did not get your own at Step 0, you can use this (copy the whole lot including the < and > at either end):
<div class="sketchfab-embed-wrapper"> <iframe title="BUST OF NEFERTITI, FOIA Results" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/8c60faca6152405e9d35784efa8b9aa1/embed"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/bust-of-nefertiti-foia-results-8c60faca6152405e9d35784efa8b9aa1?utm_medium=embed&utm_campaign=share-popup&utm_content=8c60faca6152405e9d35784efa8b9aa1" target="_blank" style="font-weight: bold; color: #1CAAD9;"> BUST OF NEFERTITI, FOIA Results </a> by <a href="https://sketchfab.com/cosmowenman?utm_medium=embed&utm_campaign=share-popup&utm_content=8c60faca6152405e9d35784efa8b9aa1" target="_blank" style="font-weight: bold; color: #1CAAD9;"> CosmoWenman </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=8c60faca6152405e9d35784efa8b9aa1" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
Step 6: Do Not Panic that it looks even more code-y. Save the page and return to viewing mode (rather than editing mode). You will get something like this:
Step 7: Click play and mess around with the model. Marvel at the new teaching possibilities. Go full-screen for the full experience, and have a play with the settings.
Bonus: Here is a nice big version to play around with. I made it big by choosing a fixed size on the option menu on sketchfab, when you press <embed>. It means it will involve some annoying scrolling on mobile devices, however. I have more to learn here. There are lots of options, have a rummage.
Cost and extensibility
Sketchfab does not cost to view, and all we have done here is view it. Everything I have shown is free.
Many models on Sketchfab cost money, and come with a price and an off-putting $ symbol. These too are free to view and embed! They only cost $ (and typically less than $50) if you want to download them to use in other software, or (depending on licence) edit them to your own purpose.
You can create your own models and host them on Sketchfab for all of this functionality. If you do this sparingly, you can do it for free. If you use it a lot, it costs. Check out the pricing plans if that applies to you - I don't need it.
If you want to really expand your use of the models on Sketchfab, consider importing them into another software package (you need to download them, and so sometimes there is a cost). I bring them into VR using edify (free trial at the link) which we at the University of Glasgow helped create through Project Mobius to help acadmics use 3D assets and VR in their teaching.