Setting up WebViewer BIM Client

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.

It is recommended you install Node and npm.

Get the React sample source code here

1. Run the following:

git clone https://github.com/XodoDocs/webviewer-BIM-sample.git
cd webviewer-BIM-sample
npm install

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

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"
  );
});

After setup is complete, run the application:

npm start

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.