Embed Sketchfab 3D

 Link See a live example.

 ViewView source code in CONTENTdm Cookbook Demo Site.

Sketchfab is an excellent platform that lets you upload 3D models and also provides a nice viewing experience. This recipe is similar to Embed external video stream. It will let you embed an external Sketchfab 3D object with the viewer into a CONTENTdm item page.

Embed-Sketchfab-3D.png

For this recipe to work, your item needs to be either a URL item, or a regular item contains a URL in a metadata field. The URL will point to the 3D object hosted on sketchfab.com (See example). For the latter, you need to specify the nickname of the metadata field which contains the URL. The demo uses the field “Source” to store the URL, with nickname “source.” You should replace the string “source” with nickname of your chosen metadata field in the JavaScript file in this line (2 occurrences):

const url = embedSketchfab.getUrl('source');

And of course replace the collection alias with the your designated collection alias:

  let collectionScope = [
    'p15700coll2'
  ];

Then you should be able to view the Sketchfab object in your CONTENTdm site.