3D models
The 3D model viewer shows STL, OBJ (with its MTL colours), glTF and GLB in the page. Turn, move and zoom by mouse, touch or keys; front, top, side and isometric views; perspective or orthographic; shaded, with edges, or as an X-ray. Cut a section across any axis and the cut faces are filled; pull the parts apart in an exploded view.
The parts list shows, hides, isolates and selects the parts the file names. Measure between two points; pin notes to the surface, kept as JSON for your page to save. It draws with WebGL in the browser, only when something changes, and nothing is uploaded anywhere.
A camera mount
An assembly of fifteen parts, with two notes. Drag to turn it, right-drag or Shift-drag to move it, scroll or pinch to zoom; double-click a point to turn about it. Select a part in the list or on the model, show it alone, or press the exploded view in the toolbar. From the keyboard: arrows turn, 1 to 7 choose a view, P switches projection.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-model-viewer id="mv-mount" label="Camera mount" units="mm" style="inline-size: 100%; --bmx-model-viewer-height: 26rem"></bmx-model-viewer>
Sections and measuring
A gearbox housing, cut down the middle to show the shaft and bearings inside. Move the cut, change its axis, keep the other side. Then choose Measure and click two points: the distance and its X, Y and Z parts appear in the Measurements tab.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-model-viewer id="mv-housing" label="Gearbox housing" units="mm" section="z" section-position="0.5" render-mode="edges" style="inline-size: 100%; --bmx-model-viewer-height: 24rem"></bmx-model-viewer>
Notes, as JSON
Choose Add a note and click the model (or press Enter for the point under the cross). Notes are pinned to their part, so they move with it in the exploded view. What your page would save is below.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-model-viewer id="mv-notes" label="Camera mount, for review" units="mm" style="inline-size: 100%; --bmx-model-viewer-height: 22rem"></bmx-model-viewer>
Your own file
Open an STL, OBJ, glTF or GLB from your computer, or drop it on the view. A glTF with its
.bin and textures, or an OBJ with its .mtl, can be opened together. The file
is read in your browser and goes nowhere.
Get the code
<script src="/assets/bmx-components.min.js"></script> <bmx-model-viewer id="mv-own" label="Your model" allow-open style="inline-size: 100%; --bmx-model-viewer-height: 22rem"></bmx-model-viewer>