How to embed a ShapeDiver model for API usage

The ShapeDiver viewer is a Javascript application which creates as WebGL context around a 3D model and opens an API to interact with the model parameters and the 3D scene. First, include the Javascript viewer in your web application. The latest stable version is available here:

https://s3.amazonaws.com/shapediverviewer/v2/2.14.0/sdv.concat.min.js

Then you need to decide where the viewer will be embedded in the application. Typically, you will create an empty div with an id, for example sdv-container, after which you can simply load the viewer with a few lines of javascript:

// container for the viewer, typically this is a div
var _container = document.getElementById('sdv-container'); 
// viewer settings 
var  _viewerSettings = { 
  // container to use 
  container: _container, 
  // when creating the viewer, we want to get back an API v2 object 
  api: {version: 2}, 
  // level of log messages which will be sent to the browser console
  loggingLevel: SDVApp.constants.loggingLevels.NONE, 
  // instantly show the 3D scene 
  showSceneMode: SDVApp.constants.showSceneModes.INSTANT, 
  // ticket for a ShapeDiver model 
  ticket: 'TICKET_STRING' 
}; 

// create the viewer, get back an API v2 object 
var api = new SDVApp.ParametricViewer(_viewerSettings);

This should be enough to render the viewer in a front-end application. You can control the size of the 3D viewer by setting explicit sizes on the container.

The api object includes all the interfaces to interact with the viewer.

The ticket to use for referencing the model can be found by PRO users on the model page, after they have configured a domain whitelist:

Check out this page of the API reference for a minimal HTML template that you can copy and paste for embedding your first model.

Read this first example to see how to start communicating with the viewer.

Embedding with an iframe
Notice in the screenshot above that ShapeDiver users can also use an iframe code to embed their models in a website. This is the most straightforward way to do so for non-developers. Using the iframe code for embedding is another option, read here how to use the API through the iframe. Note that some of the API features are not available when using an iframe.