@inweb/viewer-three
Version:
JavaScript library for rendering CAD and BIM files in a browser using Three.js
77 lines (52 loc) • 2.28 kB
Markdown
# Viewer.three
`Viewer.three` is JavaScript library for rendering CAD and BIM files in a browser using [Three.js](https://threejs.org/).
Core capabilities:
- Visualize files stored on the [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_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](https://www.opendesign.com/products/cde) by [Open Design Alliance](https://opendesign.com).
## Installation
### CDN or static hosting
For CDN, you can use [unpkg](https://unpkg.com/) or [jsDelivr](https://www.jsdelivr.com/) (replace `25.3` with a version you need):
```html
<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](https://npmjs.org)
Open a terminal in your project folder and run:
```sh
npm install @inweb/viewer-three
```
The `Viewer.three` package will be downloaded and installed. Then you're ready to import it in your code:
```javascript
import { Viewer } from "@inweb/viewer-three";
```
## Example
Download and render file from the `Open Cloud Server`:
```html
<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](https://cloud.opendesign.com/docs/index.html#/guide).
## Copyright and license
Code and documentation copyright 2002-2025 the [Open Design Alliance](https://opendesign.com). Code is distributed under a proprietary license, see [LICENSE](./LICENSE) for more information.