IIIF for Educators

3D Close Viewing and Spatial Annotation

click to copy lesson html ...

3D Close Viewing and Spatial Annotation

🖥️ Activity

This activity consists of two part: 3D scanning of an object (one of the five collected items pertaining to the Botanical Garden plant you investigated) and annotating in Sketchfab.

🛠️ Tools

Download Polycam applicationLinks to an external site. into your device (e.g. phone).

🪜 Steps

  1. Following the Polycam tutorial to scan of an object from one of the five items you collected from the UCLA Botanical Garden. 
  2. Once scanned, open your cature in Polycam on your device.
  3. Export to GLTF.
  4. Email/Airdrop to your computer. 
  5. Open your computer to access the file.
  6. Go to the Sketchfab website, create an account by linking to your google account.
  7. Click on “Upload” (orange rectangular button on the upper right corner).
  8. Drag and drop the file before uploading it.
  9. Enter “Title” and “Description” of the model.
  10. Click on “Edit 3D Settings.”
  11. Click on “Annotation” icon (in the shape of a raindrop).
  12. Put it on the location in the model where you will annotate.
  13. Write down the title, description (where you describe and interpret the part), before clicking on “okay.”
  14. Repeat 11-13 to have 3 annotations on this 3D image.
  15. Click on “Save Settings” on the upper right corner of the page, before clicking on “Exit.”
  16. Click on “Publish” on the upper right corner, before clicking “View My Model.”
  17. Click on </> at the bottom right corner outside of the text editor in Canvas.
  18. Past the following code code into the text editor: <iframe title="Arctostaphylos insularis gall" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking="" execution-while-out-of-viewport="" execution-while-not-rendered="" web-share="" src="https://sketchfab.com/models/3a1a8c5a1aa041d4b1489ebc5517d629/embed" width="800" height="600" frameborder="0">
  19. Replace the red highlighted part with the source link that you find in the embed code section in Sketchfab: <div class="sketchfab-embed-wrapper"> <iframe title="Arctostaphylos insularis gall" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/3a1a8c5a1aa041d4b1489ebc5517d629/embed"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/arctostaphylos-insularis-gall-3a1a8c5a1aa041d4b1489ebc5517d629?utm_medium=embed&utm_campaign=share-popup&utm_content=3a1a8c5a1aa041d4b1489ebc5517d629" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Arctostaphylos insularis gall </a> by <a href="https://sketchfab.com/chienlingliu?utm_medium=embed&utm_campaign=share-popup&utm_content=3a1a8c5a1aa041d4b1489ebc5517d629" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Chien-Ling Liu Zeleny </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=3a1a8c5a1aa041d4b1489ebc5517d629" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
  20. Click on </> again and you will see your 3D image. See the example below.

👓 Examples

The example (GLTF file) in Sketchfab.

IIIF example 1 in Exhibit.so.

IIIF example 2 in Exhibit.so.

✉️ Share

Upload your 3D image from Sketchfab and reflect on the experience in this activity.

Students' posts in SG180 (Plants): https://bruinlearn.ucla.edu/courses/143268/discussion_topics/634504?module_item_id=5668089

Students' posts in SG180 (Anatomy): https://bruinlearn.ucla.edu/courses/141467/discussion_topics/635132?module_item_id=5670203

copyright 2026