Package Exports

@inweb/viewer-visualize
@inweb/viewer-visualize/dist/viewer-visualize.js
@inweb/viewer-visualize/dist/viewer-visualize.module.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@inweb/viewer-visualize) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

@inweb/viewer-visualize