Installation Guide
You can use the Viewer with our CDN or with our npm package. Both variants have their advantages, so it's on you to choose.
If you don't know what is right for you, you'll probably be better off with the CDN. The npm version is for larger projects that might always use npm.
You can also have a look at this React Setup.
Current Version
Installation with NPM
You can install the Viewer with npm. To install the module, open a terminal window in you project and run:
npm install --save @shapediver/viewer
The package will be downloaded and installed for you. You can also have a look at this CodeSandBox for an example setup.
Detailed installation with NPM and Webpack
If you are having issues with the setup or are just not that familiar with setting up projects, you can find a detailed guide on how to setup a project from the start here.
Installation with CDN
In you html-head section, simply add our bundle.
<script src="https://viewer.shapediver.com/v3/VERSION_NUMBER/bundle.js"></script>
Note: Please select a fixed version by replacing VERSION_NUMBER
with a version number (example X.X.X
). If you want to update to a newer viewer version at some point, please go through our migration guide.
You can also have a look at this CodeSandBox for the complete setup.
Additional CodeSandBoxes
HTMLDivElement structure
A proper structure so that the viewer elements are displayed correctly.Closing
Closing of viewports and sessions.
Multiple Viewports or Sessions
Multiple Sessions
Creating multiple sessions in a single viewport.Multiple Sessions - Visibility
Creating multiple sessions in a single viewport and creating toggles for their visibility.Multiple Sessions - Multiple Viewports
Creating multiple sessions in multiple viewports.Multiple Viewports - Hiding Geometry
Creating multiple viewports and hiding parts of the geometry.Multiple Viewports - Hiding Geometry 2
Creating multiple viewports and hiding parts of the geometry.Multiple Viewports - Environment Geometry Updates
Creating multiple viewports and hiding parts of the geometry. Then, updating the environment geometry to fit to the updated geometry.