Everything you need to know about our Viewer and more can be found on this page and the following ones.

This documentation is specifically for the Viewer 3, the Viewer 2 documentation can be found here. If you want to migrate from Viewer 2 to Viewer 3, please view our Migration Guide.

If you are having questions, please use our forum to contact us.

Important Pages

Current Version

Simple Example

If you are starting from scratch, please visit our Installation Guide first.

Let's now create our first example. For that we first need an HTML-Page on which we want to load our example. Therefore, we create an index.html file in the root of our project:

<html>
  <head>
    <title>ShapeDiver Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div style="width: 800px; height: 600px;">
      <canvas id="canvas"></canvas>
    </div>
    <script src="https://viewer.shapediver.com/v3/latest/bundle.js"></script>
    <script src="src/index.js"></script>
  </body>
</html>
HTML

This HTML-File only has a canvas in it and a script tag that will load our script once it is built.

Now we create a src-folder and add an index.js file in it with the following contents:

// PLEASE ADD YOUR MODEL VIEW URL HERE
const modelViewUrl = "https://sdeuc1.eu-central-1.shapediver.com";
// PLEASE ADD YOUR TICKET HERE
const ticket =
  "b3d326899a36b21de2b6bd0c83c44de46c5c29e18ada3181915a9c4fd1716c50b339d27bf7c19a3700f8ae27bb349adf0ae3385f7e4629ba5d579d1afce34499caf78a9300daaabe712687c3d3286c5ecf222e9e8505de486b52335b6aec032d32b584e54d351e-231d9b0adbf1df95ba94b69179a45d23";

(async () => {
  // create a viewer
  const viewer = await SDV.api.createViewer({canvas: document.getElementById("canvas"), id: "myViewer"});
  
  // create a session
  const session = await SDV.api.createSession({ticket, modelViewUrl, id: "mySession"});
})();
JS

This is already everything we need.

Next we load a Viewer by providing a canvas (we created one in the index.html) and then we load a Session. Using the specified ticket and modelViewUrl you get the result as in the Viewer below. Please try it with your own ticket and modelViewUrl and don't forget to add the domain you are using to your allowed domains.

The result of this code can be seen below. We created a viewer instance in which we display the outputs of a session. You can also view the code of this example in this CodeSandBox.

Advanced Examples

In our example on Sessions, we take a deep dive into how a Session is constructed. This includes how you can change parameters, how you can request exports and much more. Bring me there!

In our example on Viewers, we guide you options that are available per Viewer instance. This includes, lights, camera and many different rendering settings. I want to view this!

In our example on the Scene Tree, we’ll explain how our scene tree is constructed, and how you can manipulate the data in it. I want to climb that tree!

We have many Features already and many more will come, view the documentation on them here: