ViewModel

ViewModel wraps three.js 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 appearance. As opposed to other third-party viewers, this element is simple and easy to use, allowing users to publish interactive models with the least number of hurdles.

Like the other elements, the model is added by first loading the library and then specifying the display options in Custom HTML blocks:

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

<div class="viewModel" id="carriagePlate" title="Carriage Plate 6.35" model="https://demo.mechanomy.com/wpress/wp-content/uploads/2023/04/carriagePlate635.stl" rotateModel="90, 0, 0" style="width:500px; height:500px; --colorBackground:#efefef; --colorModel:#787878; --colorEdge:#ff0000;" spinModel="true" showGrid="true" showEdges="false"></div>

The element can be customized by these attributes:

• class="viewModel" do not change
• id="carriagePlate" uniquely identifies this element on a page
• title="Carriage Plate 6.35" – appears on mouse hover
• model="pathToTheModel.ext" locates the model, see below
• rotateModel="90,0,0" rotates the model about X, Y, and Z axes, in degrees
• style="width:100%; ..." styles the element and model, as below
• spinModel="true" whether the model should slowly rotate about the vertical axis
• showGrid="true" whether the XZ grid should be shown
• showEdges="true" whether the model edges should be highlighted, the color is specified in the --colorEdge style variable

Modern browsers require the model file to be served by the same server as the website, but most WordPress installations disallow uploading of model file formats. This makes it necessary to manually upload the model files via ftp or whichever mechanism your webhost allows. It is reasonable to follow WordPress’s convention of sorting files by the upload year and month.

For instance, the carriagePlate635.stl was uploaded on 2023/04/28 to wpress/wp-content/uploads/2023/04/ and can then be given to the model parameter by model="https://demo.mechanomy.com/wpress/wp-content/uploads/2023/04/carriagePlate635.stl"

Setting the viewer width=100% makes the viewer occupy the full width of it’s parent element, here the paragraph text, while height should be set as needed by the model and surrounding content. The color behind the model and grid is given by the css variable "--colorBackground" as a hexadecimal value, with "--colorModel" setting the basic color of the model and "--colorEdge" the edge color when showEdges="true". Note that some tools will save models without surface data, which may appear as shading on what should be a flat surface. ViewModel attempts to correct these, but this may be avoided by saving the model as a different file type.