Viewer

Everything you need to know about our Viewer and more can be found on this page and the following ones. If you are having questions, please use our forum to contact us.

Important Pages

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

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

• 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

Current Version

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.