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.19.4/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.
Comments
0 comments
Article is closed for comments.