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 CDN

In you html-head section, simply add our bundle.

<script src="https://viewer.shapediver.com/v3/VERSION_NUMBER/bundle.js"></script>
HTML

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.

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
BASH

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.

Detailed NPM Installation Guide

Package Installation

First of all, you need to have a version of npm installed. We currently use version 7.7.6, but any newer version should be fine.

Then, let's call some npm tasks and install some dependencies. Go to an empty folder that you want to use and call these commands. Some might not be necessary for you if you are integrating the viewer into an existing setup. This command just initializes npm for this project and creates the package.json file that is needed.

npm init --yes
BASH

Then we install some development dependencies. The first one is typescript, as we are using TypeScript in this example, we also have to install the dependency for it. The next three are all dependencies for webpack, we get to that later on.

npm install --save-dev typescript webpack webpack-cli ts-loader
BASH

Then, we install the actual Viewer dependency. 

npm install --save @shapediver/viewer
BASH

Adjusting Config Files

First, we create a file called tsconfig.json in the root of the project and add this content to it.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "es6",
    "target": "es2015",
    "moduleResolution": "node"
  }
}
JSON

Then, we create a webpack.config.js file in the root of the directory and again, add some content to it. Here the package ts-loader is used, as webpack normally doesn't work with TypeScript files. 

const path = require('path');
module.exports = {
  entry: './src/index.ts',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    }],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};
JS

Building

To build the project, in our package.json we just need to add a small script for that. Currently there is only a test script in there, we now add a build script to make it look like this: 

"scripts": {
  "build": "webpack"
}
JSON

On the main viewer page, we create a simple example, that can be built now with the command npm run build. To try this out, just create a simple http-server in this folder and load the index.html.