Framework Agnostic Setup

New licenses for WebViewer BIM are no longer offered.

This project sample uses React as the front-end framework, but you may wish to use (or not use) a different framework. This section shows how to setup the front-end agnostic of any framework:

Prerequisites

It is recommended you install Node and npm.

NPM packages

• https://www.npmjs.com/package/@pdftron/webviewer
• https://www.npmjs.com/package/@pdftron/webviewer-bim-client

Copying resources to public/ folder

There are several directories that need to be copied and served locally in your application.

There are two folders you need to copy:

• node_modules/@pdftron/webviewer/public
• node_modules/@pdftron/webviewer-bim/dist

Bash

cp -R ./node_modules/@pdftron/webviewer/public public/webviewer/lib
cp -R ./node_modules/@pdftron/webviewer-bim/dist public/webviewer-bim

See scripts/copy-webviewer-files.js for a simple script to do this.

Afterwards the folder structure will look something like:

Shell

public/
  webviewer/
    lib/
      ui/
      core/
  webviewer-bim/
    compress/
    oda/
    webviewer-bim-min.js

Sample code

JavaScript

import  Webviewer  from  '@pdftron/webviewer';
import { initializeBimViewer } from '@pdftron/webivewer/bim-client'

Webviewer({
  path: '/webviewer/lib',
}, document.getElementById('viewer')).then(instance  => {

  const license = `---- Insert commercial license key here after purchase ----`;
  const serverURL = `---- Insert server URL after setup ----`;
  const options = { license: license };
  const WebViewerBIM = await initializeBimViewer(instance, serverURL, options);
  WebViewerBIM.File.load3dAsset('Add URL to your 3D asset here');

});