Mechanomy

Software for Pre-CAD systems design

ViewModel

ViewModel wraps the three.js library to display 3D models in any page. For instance, this is a carriage plate from our Moover project:

At any time the user can interact with the model, panning and zooming to see particular features. The element accepts STL, PLY, OBJ, 3mf, and GLTF/GLB file formats and allows basic control over the model appearance. As opposed to other third-party viewers, this element is simple and easy to use, allowing users to publish interactive models with minimal hurdles.

Like our other libraries, the model is added by first loading the library:

<script defer src="https://dist.mechanomy.com/ViewModelWeb/viewModel.js"></script>

and then specifying the display options:

<div class="viewModel" id="carriagePlate" title="Carriage Plate 6.35" model="carriagePlate635.stl"
rotateModel="90, 0, 0" spinModel="true" showGrid="true" showEdges="false"
style="width:100%; height:500px; margin:auto; --colorBackground:#efefef; --colorModel:#787878; --colorEdge:#ff0000;">
</div>

Within these options:

  • class="viewModel" this allows the element to be located by the library and cannot be changed
  • id="carriagePlate" this uniquely identifies the model viewer from other viewers used on the same page
  • title="Carriage Plate 6.35" this title appears on hover/mouse-over
  • model="carriagePlate635.stl" the model file to display, see below
  • rotateModel="90, 0, 0" rotate the model about global X, Y, or Z in degrees
  • spinModel="true" whether the model should spin about Y (up)
  • showGrid="true" whether to show the XZ grid
  • showEdges="false" whether to highlight the model edges; note that the model file format will likely have more edges than what are displayed in CAD
  • style="width:100%; ..." see below

As mentioned, the model may be formatted STL, PLY, OBJ, 3mf, and GLTF/GLB file formats, but these formats are not all well-specified or rigorously implemented. If the model does not load, please look in the browser console for an explanation or try another file format.

Note that modern browsers require the model file to be served by the same server as the website, but model files are not always recognized by some website editors which may disallow uploading of the model file. In these cases it is unfortunately necessary to manually upload the model files to the server via FTP, or whichever mechanism your host allows, so that the file can be served from the same server as the website.

If your website is written in WordPress, see our WordPress demonstration website.

Once the model is loaded, simple styling may be applied by the style="" parameter:

  • width:100%; height:500px; this specifies width and height of the element; width=100%; makes the viewer match the width of surrounding page elements while height is arbitrary
  • margin:auto; this centers the element within its container
  • --colorBackground:#efefef; this provides the background color of the viewer, behind the model and grid
  • --colorModel:#787878; this is the base color of the model, which will be shaded according to the model's surfaces and viewer lighting
  • --colorEdge:#ff0000;" if showEdges="true", this is the color of the highlighted edges

There are a wide variety of 3D viewers and services but this may be simplest and easiest to add to your website; if it is not, please let us know what's missing.

Development Status

The ViewModel library is under continued development and is released under the MIT License.

On third-party JavaScript

No two websites are written or hosted the same way, and the various organizations responsible for these will have a variety of policies on the use of third-party libraries. Our Javascript libraries are cleanly written to provide only the capabilities described. They do not accept personally-identifiable information from your users, nor do they utilize cookies or other local storage technologies to function and generally will not require you to display a cookie banner or other notice (understanding that compliance with any applicable authority remains your duty).

Mechanomy respects you and your users and does not perform any fingerprinting or usage tracking in these libraries. When you place one of our <script> tags on your page, the browsers of visitors to your website will download our library; this request is the only information Mechanomy receives from you or your users.

These libraries are written in vanilla JavaScript and bundled via WebPack. External dependencies are Plotly.js for SimpleGraph and three.js for ViewModel.

Please note that libraries loaded from dist.mechanomy.com, as described above, may change at any time according to our development and maintenance needs. While we will endeavor to not change functionality, this cannot always be avoided. If you would like to receive notice of these changes, please email us.

We are also happy to assist you in evaluating these libraries by creating a static prototype of your website for your internal evaluation, please send us a link to the exact page, the desired library and functionality, and any details you know about your web framework or host.