@inweb/viewer-three
v27.1.9
Published
JavaScript library for rendering CAD and BIM files in a browser using Three.js
Maintainers
izavyalovReadme
Viewer.three
Viewer.three is JavaScript library for rendering CAD and BIM files in a browser using Three.js.
Core capabilities:
- Rendering CAD/BIM files from Open Cloud Server, web, or local files
- Interactive scene navigation (Orbit, Pan, Zoom, Walk, Fly modes)
- Model selection and highlighting
- Cutting planes and slicing
- Markups and measurements
- Viewpoint management
- Extension system for extending functionality
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/[email protected]/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-threeThe 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/[email protected]/dist/client.js"></script>
<script src="https://unpkg.com/@inweb/[email protected]/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.
Copyright and license
Code and documentation copyright 2002-2025 the Open Design Alliance. Code is distributed under a proprietary license, see LICENSE for more information.