3D Model Viewer

3D Model Viewer

Renders a GLB 3D model inside a ThingsBoard widget and binds each entity in the datasource to a named mesh in the model. Use it to build interactive industrial scenes — silo yards, plant floors, tank farms, machinery — that react to live telemetry.

You can test this widget in action on the solution template.

Silo monitoring verified pinkevych.d

How it works

• The widget loads a GLB model from the configured URL.
• Each entity in the datasource is mapped to a mesh in the model via its meshId attribute — the attribute value must match the mesh name in the GLB (for example Silo.001, Silo.002).
• Every other data key on the entity (telemetry or attribute) is available to the color, tooltip, and label functions, which are evaluated per entity to drive the mesh appearance and in-scene overlays.
• One data key can be flagged with “Use for level” to drive a fill-level animation — used by the silo cutaway model to visualize grain volume.
• Mesh clicks fire the “On MESH click” action, which can be wired to dashboard state changes for drill-down navigation.

Datasource

• Use an entity alias that resolves to all entities you want shown on the model.
• Required attribute: meshId — its value must match the name of the corresponding mesh in the GLB.
• Any additional telemetry or attribute keys are passed into the color / tooltip / label functions.

Widget settings

Setting	Description
Camera X / Y / Z position	Initial camera position in scene coordinates (defaults around 2.5 / 2.6 / 2.8).
Model source	Choose how the GLB is located. Two options: ThingsBoard resources (use a model uploaded to the ThingsBoard resource library) or Public URL (fetch the GLB from any reachable URL).
Resource ID (ThingsBoard resources)	ID of the GLB resource stored in Resources library → General.
Model URL (Public URL)	Direct link to the GLB file, e.g. https://raw.githubusercontent.com/pinkevmladchy/thingsboard-silo-glb-models/main/silos_scene.glb.
Mesh type	Prefix used to pick which group of meshes inside the GLB the widget binds to. The widget renders meshes whose names start with this prefix and matches them against the entities’ meshId attribute. Examples: Silo for the yard view (meshes Silo.001, Silo.002, …), Sensor for the cutaway view (meshes Sensor.001, Sensor.002, …). A single GLB can contain both groups — switch Mesh type to show one or the other.
Color function	f(ctx, entity, entities) — returns the color for the entity’s mesh (e.g. red for alarm, green for healthy).
Tooltip function	f(ctx, entity, entities) — returns the tooltip content shown on click.
Label function	f(ctx, entity, entities) — returns the in-scene label drawn next to the mesh.

All three functions receive the widget context, the current entity (with all its data keys), and the full entities list — so you can implement per-entity styling or cross-entity logic.

💡 Tip: finding the best camera position

When you load a custom GLB you usually need to tune the camera so the scene is well framed. Instead of guessing the values:

1. Open the dashboard and focus the widget;
2. Orbit / zoom the model to the framing you want;
3. Press p (or P) and open the browser DevTools console;
4. The widget logs the current camera position as a ready-to-paste line, e.g. this.camera.position.set(2.83, 3.02, 2.12);.

Copy the three numbers into the Camera X / Y / Z position fields and save the widget settings.

Where it shines

• Silo Monitoring — yard view with one entity per silo, plus a cutaway silo with one entity per internal sensor. Both states use a color function that flips red / green based on alarm state.
• SCADA plant views — render machinery and color meshes by live status.
• Tank farms — visualize remaining fluid through the “Use for level” key.

Custom models

Ready-to-use models and a generator skill live in the open thingsboard-silo-glb-models repository. It ships the GLB models used by the Silo Monitoring solution template plus a Claude Code skill that produces new models for any silo count and sensor layout — with mesh names that follow the Silo.001, Silo.002, … convention so they match the widget’s meshId mapping out of the box.