Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions _posts/2024-09-05-o3dv.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
---
layout: post
title: '3D Viewer for Crabtree project'
subtitle:
author: Evan Williamson
publish-date: Sep 5, 2024
tags: [tech, cb-add-on]
short_description: 'Using o3dv to present 3D models of artifacts in a CB-CSV project.'
---

At University of Idaho Library we have recently been wrapping up the "Donald E. Crabtree Lithic Technology Collection" project by creating the new [digital collection website](https://www.lib.uidaho.edu/digital/crabtree/).

{% include feature/image.html objectid="https://objects.lib.uidaho.edu/crabtree/crabtree-banner.jpg" alt="lithic point of colorful stone" link="https://www.lib.uidaho.edu/digital/crabtree/" %}

Supported by a [Digitizing Hidden Collections grant](https://www.clir.org/hiddencollections/), this complex multi-year project involved digitizing thousands of archival objects *and* flitknapped artifacts ([learn more on the About page](https://www.lib.uidaho.edu/digital/crabtree/about.html)).
Each artifact was carefully photographed from multiple angles following a standardized procedure, including a unique [GGOI process](https://www.lib.uidaho.edu/digital/crabtree/digitization.html) to enable extremely shiny lithic surfaces to be captured in detail.
A smaller group was selected for [3D Photogrammetry](https://awbla.github.io/awbla-student-workflow/content/3-photogrammetry.html), where dozens of overlapping images of an object are taken with 360 degree rotation, and then processed with software to generate 3D models (using Agisoft Metashape).

With thousands of images and hundreds of 3D model files (and accompanying metadata), it was time to make this fascinating content available via a customized CollectionBuilder-CSV website.

CB-CSV has one basic built in 3D model viewer option ("_includes/item/3d-model-viewer.html" using [model-viewer](https://modelviewer.dev/)) that supports GLB or GLTF models out of the box.
However, our items had OBJ, STL, and X3D models only, and I had little desire to bulk convert all to generate new formats!

After testing a variety of javascript libraries and frameworks for presenting 3D models on static sites (including [3DHOP](https://www.3dhop.net/), [cgwire](https://github.com/cgwire/js-3d-model-viewer), and [threejs](https://threejs.org)) I settled on [Online 3D Viewer (o3dv)](https://github.com/kovacsv/Online3DViewer) because it worked well and supports a wide variety of model formats.
You can test out their fully featured viewer at [3dviewer.net](https://3dviewer.net/).

I set up the basic implementation of o3dv and shared it as a "cb-add-on" repository, [o3dv_cb-add-on](https://github.com/CollectionBuilder/o3dv_cb-add-on).
These "cb-add-on" repositories are packages of libraries, includes, and layouts to add new features into CB-CSV--download the code and drop it into your CB-CSV project!

For Crabtree collection, I started from that basic implementation and created a custom layout for our artifact items.
Each artifact could have some 2D photographs and/or some 3D model files, so the challenge is to present all those options in a consistent item page.
It incorporates a "gallery" feature for the 2D photographs.
If 3D models are available, it adds a "View 3D Model" button which opens a [full screen modal](https://getbootstrap.com/docs/5.3/components/modal/#fullscreen-modal) to display the 3D viewer.
Loading the model with o3dv is handled by javascript, allowing us to change models and remove them when the modal is closed.

Try it out in this example, [Ce. 1890](https://www.lib.uidaho.edu/digital/crabtree/items/ce_cd_d4_1890_model.html)

{% include feature/image.html objectid="https://objects.lib.uidaho.edu/crabtree/small/ce_cd_d4_1890-a_sm.jpg" link="https://www.lib.uidaho.edu/digital/crabtree/items/ce_cd_d4_1890_model.html" alt="flintnapped point with fluted edges" %}

The source code is available at [thecdil/crabtree_source](https://github.com/thecdil/crabtree_source).