Setting up WebViewer BIM Client

New licenses for WebViewer BIM are no longer offered.

To get the sample working, both WebViewer BIM client and server must be setup and running. The server URL will be referenced in the front-end to allow communication between client and server.

Prerequisites

It is recommended you install Node and npm.

Get the React sample source code here

Setup application

1. Run the following:

Bash

git clone --depth=1 https://github.com/ApryseSDK/webviewer-samples.git
cd webviewer-samples/webviewer-BIM
npm install

1. Change serverURL variable in App.js to wherever your server is hosted. See Setting up WebViewer BIM Server section for details.

JavaScript

WebViewer({ path: "/webviewer/lib" }, viewer.current).then(async (instance) => {
  const license = `---- Insert commercial license key here after purchase ----`;
  const serverURL = `---- Insert server URL after setup ----`;

  const options = getViewerOptions(license);
  const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
  webviewerBIM.File.load3dAsset(
    "Add URL to your 3D asset here"
  );
});

Run application

After setup is complete, run the application:

Bash

npm start

Include credentials in cross-origin BIM requests

The following APIs accept a withCredentials boolean property in their respective options parameters:

• load3dAsset
• preload3dAsset
• loadCached3dAsset
• checkAssetConversionProgress

If enabled, the underlying Fetch requests have { credentials: 'include' } added to the options parameter. See the Fetch MDN documentation and WHATWG 'credentials' definition for more information on automatically including credentials in cross-origin requests.

The BIM server must have allow_credentials enabled, and a non-wildcard value specifed in allow_origins, otherwise the browser will throw a CORS error. See configuring cross-origin credentials documentation for server-side configuration steps.

NOTE: The WebViewer BIM custom authorization is not affected by this functionality. If you enabled server-side authorization, ensure the authorization tokens are included in their respective APIs.