Git Product home page Git Product logo

webviewer-bim-sample's Introduction

WebViewer BIM

WebViewer is a powerful JavaScript-based library that's part of the PDFTron SDK. It allows you to view and annotate various file formats (PDF, MS Office, images, videos) on your web app with a fully customizable UI.

This sample uses the BIM addon for WebViewer. It allows you to view, annotate, and collaborate on 3D models.

Features

  • Load models from your own servers without relying on the cloud.
  • Navigate complex BIM models with the look and feel of the familiar Webviewer UI.
  • Traverse the model tree and toggle visibility of objects.
  • View model properties and rich metadata such as material and dimensional information.
  • Annotate BIM models to track design issues.

webviewer-bim-1-0-0

Architecture

There are two components to WebViewer BIM:

  1. Server-side file conversion that supports 3D streaming to the client.
  2. Client-side 3D viewer that renders BIM models and allows navigation entirely encapsulated in our familiar WebViewer UI.

Running the sample

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.

Setting up Webviewer BIM Server

The server comes packaged as either a binary or a Docker image available for Linux or Windows. For server setup, configuration, and API details please read the Webviewer BIM Server README.

The server is supported on Windows, Linux and MacOS Intel (M1 not supported).

Prerequisites

Setup server

Run server

Server APIs

  • See Server APIs section for details on the WebViewer BIM Server APIs.

Setting up Webviewer BIM Client

Setup application

  1. Run the following:
git clone https://github.com/XodoDocs/webviewer-BIM-sample.git
cd webviewer-BIM-sample
npm install
  1. Change serverURL variable in App.js to wherever your server is hosted. See Setting up WebViewer BIM Server section for details.

Run application

After setup is complete, run the application:

npm start

Usage

initializeBimViewer(instance, serverURL, options)

Call initializeBimViewer within the promise resolve of WebViewer instance to initialize BIM viewer.

  • instance - WebViewer instance that is available after initializing.
  • serverURL - URL of WebViewer BIM server.
  • options - Initialization options for WebViewer BIM.
    • license - WebViewer BIM license key.
    • dataSchema - Options to define schema of the properties panel.

Returns a promise that resolves to an object containing the functions needed to load models in WebViewer.

import  Webviewer  from  '@pdftron/webviewer';
import { initializeBimViewer } from '@pdftron/webviewer/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,
    dataSchema: {
      headerName: 'Name',
      defaultValues: {
        Description: 'Description',
        GlobalID: 'GlobalId',
        Handle: 'handle',
      },
      groups: {
        Dimensions: {
          Length: 'Length',
          Width: 'Width',
          Height: 'Height',
          EmptyRow2: 'EmptyRow2',
          GrossFootprintArea: 'GrossFootprintArea',
          GrossSideArea: 'GrossSideArea',
          GrossVolume: 'GrossVolume',
        },
      },
      groupOrder: ['Dimensions'],
      removeEmptyRows: true,
      removeEmptyGroups: true,
      createMiscGroup: true,
    }
  };

  const WebViewerBIM = await initializeBimViewer(instance, serverURL, options);
}

load3dAsset(pathToAsset)

Call load3dAsset after initializing the 3D viewer to load an IFC model.

  • pathToAsset - URL or path to IFC model.
const webviewerBIM = await initializeBimViewer(instance, serverURL, options);

webviewerBIM.File.load3dAsset('<uri for 3d asset>');

preload3dAsset(serverURL, pathToAsset, conversionOptions)

Static method that preloads an IFC model for future loading. This can be used to convert model data prior to loading. If 'enable_auth' is enabled on your BIM server you will also receive an Auth token for both the model data and the properties data.

  • serverURL - URL to your BIM server instance.
  • pathToAsset - URL or path to IFC model.
  • conversionOptions - Optional options object to modify load behavior.
const assetObject = await preload3dAsset(<serverURL>, <pathToAsset>, <conversionOptions>);

/*
Sample Asset Object
{
   modelData: {
	id: '7bdb6aeab27191a882b9d3ed1e48afd4b490d755',
	auth: 'be36e17d84d9eac35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   },
   propertiesData: {
	id: 'b204f18fb2168dc547d5056721c50ceb5bb3c62b',
	auth: 'fa34e17d84g3awe35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   }
};
*/

loadCached3dAsset(assetObject)

Call loadCached3dAsset to load an existing asset from the BIM server

  • assetObject - Object containing the ids for the asset data and optionally properties data. If 1enable_auth1 is enabled on your BIM server you will also need to include an Auth token for both the model data and the properties data.
sampleAssetObject = {
   modelData: {
	id: '7bdb6aeab27191a882b9d3ed1e48afd4b490d755',
	auth: 'be36e17d84d9eac35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   },
   propertiesData: {
	id: 'b204f18fb2168dc547d5056721c50ceb5bb3c62b',
	auth: 'fa34e17d84g3awe35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   }
};
	
const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
const assetObject = await webviewerBIM.File.loadCached3dAsset(sampleAssetObject);

checkAssetConversionProgress(assetObject)

Call checkAssetConversionProgress to check the progress on a preloaded Asset.

  • assetObject - Object containing the ids for the asset data and optionally properties data.

Returns True if the asset is ready to be loaded, false otherwise.

sampleAssetObject = {
   modelData: {
	id: '7bdb6aeab27191a882b9d3ed1e48afd4b490d755',
	auth: 'be36e17d84d9eac35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   },
   propertiesData: {
	id: 'b204f18fb2168dc547d5056721c50ceb5bb3c62b',
	auth: 'fa34e17d84g3awe35f41aef4cd9dc6e894f9f452b96175b2075308725338c3fe'
   }
};
	
const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
	
// rudimentary polling against the BIM server to know when the Asset is ready
while (true) {
  const status = await webviewerBim.File.checkAssetConversionProgress(assetObject);
  if (status === true) {
    break;
  }
  await new Promise((r) => setTimeout(r, 200));
}
	
const assetObject = await webviewerBIM.File.loadCached3dAsset(sampleAssetObject);

unmountBimViewer()

Call unmountBimViewer to revert WebViewer back to its original state, and to clear any memory from the WebViewer BIM client.

import  Webviewer  from  '@pdftron/webviewer';
import { initializeBimViewer, unmountBimViewer } from '@pdftron/webviewer-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");
 
 // Call unmountBimViewer when you're ready to unmount.
 // unmountBimViewer(instance);
}

enableSSAO()

Call enableSSAO to enable screen-space ambient occlusion for the viewer.

const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
webviewerBIM.Viewer.enableSSAO();

disableSSAO()

Call disableSSAO to disable screen-space ambient occlusion for the viewer.

const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
webviewerBIM.Viewer.disableSSAO();

setSSAOOptions()

Call setSSAOOptions to adjust screen-space ambient occlusion for the viewer.

const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
webviewerBIM.Viewer.setSSAOOptions({
 // example parameters：
 isDynamicRadius: true,
 radius: 1,
 loops: 64,
 blurRadius: 2,
 power: 1.4,
})

enableAntiAliasing()

Call enableAntiAliasing to enable anti-aliasing for the viewer.

const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
webviewerBIM.Viewer.enableAntiAliasing();

disableAntiAliasing()

Call disableAntiAliasing to disable anti-aliasing for the viewer.

const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
webviewerBIM.Viewer.disableAntiAliasing();

setCameraSensitivity(number)

Call setCameraSensitivity to set the sensitivity for Orbit/Pan tool.

  • number to set the sensitivity
const cameraTools = {
  orbit: 'Orbit3D',
  pan: 'Pan3D',
  walk: 'Walk',
};
const panTool = instance.Core.DocumentViewer.getTool(cameraTools.pan);
panTool.setCameraSensitivity(10);

getCameraSensitivity()

Call getCameraSensitivity to get the sensitivity for Orbit/Pan tool. Returns a value of Number

const cameraTools = {
  orbit: 'Orbit3D',
  pan: 'Pan3D',
  walk: 'Walk',
};

const orbitTool = instance.Core.DocumentViewer.getTool(cameraTools.orbit);
orbitTool.getCameraSensitivity();

Framework Agnostic Setup

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.js and NPM.

NPM packages

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
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:

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

Sample code

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('<uri for 3d asset>');


});

Contributing

See contributing.

License

See license.

This project was generated with Create React App. Go to Create React App documentation for more information.

webviewer-bim-sample's People

Contributors

adamintheoculus avatar jingyehou avatar legendofthefox avatar

Stargazers

avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

webviewer-bim-sample's Issues

Can not use initializeBimViewer in Angular 15.0.0 and where copy js files in debug mode

Hi
I want to integrate the 'webviewer-bim-client' into an Angular app (15.0.0) but there is an error :

Could not find a declaration file for module '@pdftron/webviewer-bim-client'. 'c:/Projects/my-try/BIMMAngular/node_modules/@pdftron/webviewer-bim-client/dist/webviewer-bim-min.js' implicitly has an 'any' type.
Try npm i --save-dev @types/pdftron__webviewer-bim-client if it exists or add a new declaration (.d.ts) file containing declare module '@pdftron/webviewer-bim-client';

also for local debugging, I mean If I run 'npm start', where the files mentioned in 'copy-webviewer-files.js' mentioned should be copied, because when running 'npm start' there is no 'dist' folder created and only if 'ng build called' the dist folder is created.

Update

I could run bim viewer and see the ifc file, but there is only one error in console.

component code:

import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import WebViewer from '@pdftron/webviewer';
// @ts-ignore
import { initializeBimViewer } from '@pdftron/webviewer-bim-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('viewer') viewer: ElementRef<any> | undefined;

  ngAfterViewInit(): void {
     debugger;

     WebViewer(
      { path: '/webviewer/lib' },
      this.viewer!.nativeElement,
    ).then(async instance => {

      const license = ``;
      const serverURL = `http://localhost:8085`;

      const options = this.getViewerOptions(license);

      const webviewerBIM = await initializeBimViewer(instance, serverURL, options);
      webviewerBIM.File.load3dAsset('https://raw.githubusercontent.com/andrewisen/bim-whale-ifc-samples/main/AdvancedProject/IFC/AdvancedProject.ifc');
    });
  }

  getViewerOptions(license: string) {
    return {
      license,
      dataSchema: {
        headerName: 'Name',
        defaultValues: {
          Description: 'Description',
          GlobalID: 'GlobalId',
          Handle: 'handle',
        },
        groups: {
          ExampleGroup01: {
            ObjectType: 'ObjectType',
            ObjectPlacement: 'ObjectPlacement',
          },
        },
        groupOrder: ['ExampleGroup01'],
        removeEmptyRows: true,
        removeEmptyGroups: true,
        createMiscGroup: true,
      }
    };
  }


  title = 'BIMMAngular';
}

Error :

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'catch')

at webviewer-core.min.js:610:193

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.