@inweb/viewer-threejs NPM

Viewer.three

Viewer.three is a JavaScript library for visualization of 3D CAD and BIM data from glTF files stored on the Open Cloud Server, on the web, or in local files.

This library enables you to easily integrate advanced Three.js capabilities into your applications, including user interaction with scenes and objects, markups, and collaboration using the inWEB Open Cloud platform.

glTF is a royalty-free file format commonly used in 3D applications.

Installation

CDN or static hosting

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

<script src="https://unpkg.com/@inweb/viewer-three@25.2/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:

// create instance of the Client class for working with server
const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });

// login to the server
await client.signInWithEmail("email", "password");

// get file list from the server
const files = await client.getFiles();

// create instance of Viewer class for rendering drawing files
const viewer = new ODA.Three.Viewer(client);

// initialize Viewer it with the specified <canvas> element
await viewer.initialize(canvas);

// open the first file in the list
await viewer.open(files.result[0]);

To learn more, see First application guide.