@inweb/viewer-visualize NPM

Viewer.visualize

Viewer.visualize is JavaScript library for rendering CAD and BIM files in a browser using VisualizeJS.

Core capabilities:

Visualize files stored on the Open Cloud Server, on the web, or on your local computer.
Add user interaction with scenes.
Create markups.
Save and load viewpoints.

This library is a part of CDE SDK by Open Design Alliance.

Installation

CDN or static hosting

For CDN, you can use unpkg or jsDelivr (replace 25.3 with a version you need):

<script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>

The global namespace for Viewer.visualize is ODA.Visualize.

<script>
  const viewer = new ODA.Visualize.Viewer();
</script>

Install via npm

Open a terminal in your project folder and run:

npm install @inweb/viewer-visualize

The Viewer.visualize package will be downloaded and installed. Then you're ready to import it in your code:

import { Viewer } from "@inweb/viewer-visualize";
const viewer = new Viewer();

Example

Download and render file from the Open Cloud Server:

<html>
  <body>
    <div>
      <canvas id="canvas" />
    </div>

    <script src="https://unpkg.com/@inweb/client@25.3/dist/client.js"></script>
    <script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>

    <script>
      const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });
      const viewer = new ODA.Visualize.Viewer(client);

      init();

      async function init() {
        await client.signInWithEmail("email", "password");
        const files = await client.getFiles();
        await viewer.initialize(canvas);
        await viewer.open(files.result[0]);
        viewer.setActiveDragger("Orbit");
      }
    </script>
  </body>
</html>

To learn more, see First application guide.