What's threed-viewer?

Threed-viewer is a custom configuration of a three.js that uses HTML custom elements (v1) to ease the creation of scenes. It follows some ideas from modelviewer, but has a focus on rendering parts for a mechanical engineering CAD-alike context (for example with the use of an orthographic camera).

It relies on three custom elements: <threed-viewer>, <threed-model>, and <threed-annotation>.

Getting started

To use the library, it is sufficient to include the bundled javascript and to add the appropriate tags. The following code will generate the viewer below.

The best way to explore the options of threed-viewer is the test it live through the demo page. In addition, examples shown next aim at representing most common use cases.

More examples

GLB Scene

Here a full scene created in Siemens NX (CAD Software) is exported and loaded as a single model. Centering has been disabled, so the original center uses the reference coordinates set in CAD. A wireframe model is added by the viewer with a custom color.

Use of links

Instead of specifying the URL of the model through the src attribute, the URL can also be provided through a link tag <a>. This is particularly useful when using this library through the Moodle filter.

Annotations

This example highlights the possible annotations types, positioning rules, and options. Note that the text label is added on a layer on top of the 3D model and, as such, remains visible even if normally hidden by the model.