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.
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
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
modelViewUrl you get the result as in the Viewer below. Please try it with your own
modelViewUrl and don't forget to add the domain you are using to your allowed domains for it to work.
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!
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:
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.
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.
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.