@inweb/viewer-three NPM

Viewer.three

Viewer.three is JavaScript library for rendering CAD and BIM files in a browser using Three.js.

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-three@25.3/dist/viewer-three.js"></script>

The global namespace for Viewer.three is ODA.Three.

Install via npm

Open a terminal in your project folder and run:

npm install @inweb/viewer-three

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

import { Viewer } from "@inweb/viewer-three";

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-three@25.3/dist/viewer-three.js"></script>

    <script>
      const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });
      const viewer = new ODA.Three.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.