Viewer

Everything you need to know about our Viewer and more can be found on this page and the following ones. If you have any questions or need help with the viewer, please visit the ShapeDiver Forum.

For the documentation of the Viewer, there are three main pages:

• The Viewer help desk which offers introductions, descriptions and guides.

• The Viewer API documentation which offers the technical documentation of the API.

• The Viewer examples page which offers various examples (with GitHub links and CodeSandBoxes).

Important Pages

• The complete API documentation of Viewer 3 can be found here

• The examples page with many different examples that use Viewer 3 can be found here

• To be up-to-date with all current changes, visit our Release Notes

• If you want to update from an older version of Viewer 3, please use our Migration Guide

• For the installation visit our Installation Guide

• We also offer a YouTube tutorial for the most common parts of the API

• If you want to migrate from Viewer 2 to Viewer 3, please visit our Viewer 2 - Migration Guide

Current Version

Please note that the major version of Viewer 3 has increased from version 2 to version 3. The term Viewer 2 in our documentation refers to an older, completely different implementation. If you are unsure whether you are using Viewer 3, you can check the browser console, which clearly indicates if Viewer Version 3 is being used, or contact us for assistance.

Simple Example

Let's 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. 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.ts file. There are already all the files we need.

Next we load a Viewport by providing a canvas (we created one in the index.html) and then we open a Session with a model on a ShapeDiver Geometry Backend. 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 for it to work.

React Example

As modern web development often uses libraries like React, we want to make it as easy as possible for you to get started with a react implementation of our viewer. Therefore, we created this advanced react example. Go check it out!

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 Viewports, we guide you options that are available per Viewport 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!

In our example on Event Listeners, we’ll explain how to keep informed on everything that is going on. Listen to them here!

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

• Animations

• Attribute Visualization

• Augmented Reality (AR)

• Color Management

• Event Listeners

• GLTF Loader

• HTML Elements

• Interactions

• Materials

• Three.js Objects

Showcase

To inspire what you can do with the Viewer API, here are some examples that show the combination of a few of the features. These are just simple examples to peak your interest, if you would like to see what our clients built, you can have a look here.

Lamborghini Configurator

In the Lamborghini Configurator example we focused on bringing the model to life and improving the connections between the UI and the viewer. Although the UI was written in a simplistic way, it already allows to image what is possible in a full software development project.

Kitchen Configurator

In the Kitchen Configurator example we mainly focus on interactions with the scene. Here you can place objects into the scene to fixed positions in the viewer. If you are interested in adding these kind of interactions to your project, please start with our Interaction help pages here.

Ribs Table Interaction

In the interaction example we showcase how input that is provided by moving objects in the scene can change the geometry that is returned from the servers.

Multiple Sessions

In this showcase we demonstrate how multiple sessions can be used at once.

Multiple Viewports

In this showcase we demonstrate how multiple viewports can be used at once.