3D Model Viewer

Who it’s for

Industrial operators, SCADA engineers, and plant managers ask “how do I show my plant floor, silo yard, or tank farm as a live 3D model where each asset changes color based on real telemetry?” This widget turns a GLB 3D model into an interactive scene that reacts to live device data.

You can see this widget in action in the Silo Monitoring solution template.

Silo monitoring verified pinkevych.d

What it does

The widget loads a GLB model and maps each entity in your datasource to a named mesh inside it. An entity with meshId = "Silo.003" and fillLevel = 72 lights up the Silo.003 mesh in a color returned by your color function and shows a fill-level animation driven by the fillLevel key. Clicking a mesh fires an action that can navigate to a drill-down dashboard for that asset.

• Per-entity mesh coloring driven by a JavaScript color function that receives live telemetry and attribute values
• In-scene tooltips and labels from configurable functions evaluated per entity on every data update
• Fill-level animation for one designated key, used to visualize grain volume in silos or fluid level in tanks
• Mesh click action wired to dashboard state transitions for drill-down navigation

How to set up

Data keys

Key	Role	Type	Description
meshId	Mesh mapping	Attribute	Value must match the mesh name in the GLB (e.g. Silo.001); required on every entity
(any telemetry key)	Color / tooltip input	Timeseries or Attribute	Any additional keys are passed into the color, tooltip, and label functions
(one key, optional)	Fill level	Timeseries or Attribute	Flag one key with “Use for level” to drive the fill-level animation (0–100 %)

Widget settings

Setting	Description
Model source	ThingsBoard resources (upload the GLB to Resources library → General, then enter the Resource ID) or Public URL (direct link to the GLB file)
Mesh type	Prefix used to select which mesh group the widget binds to — e.g. Silo for yard meshes, Sensor for cutaway meshes. A single GLB may contain both groups
Camera X / Y / Z	Initial camera position; use the p key shortcut (see Tips) to capture the exact values after orbiting to the desired view
Color function	f(ctx, entity, entities) — returns the hex color for the entity’s mesh
Tooltip function	f(ctx, entity, entities) — returns the HTML tooltip shown on mesh click
Label function	f(ctx, entity, entities) — returns the in-scene label text drawn next to the mesh

How to customize

• To change what color a mesh shows — edit the color function; it receives the entity with all its data keys, so you can branch on alarm state, threshold, or any attribute.
• To switch between yard and cutaway views — change the Mesh type prefix to select a different group of meshes from the same GLB.
• To use your own GLB model — upload it to ThingsBoard resources or host it at a public URL, then update the Model source setting. Ensure mesh names follow the Prefix.001, Prefix.002, … convention so they match your entities’ meshId attributes.

Tips

• To find the best camera position: orbit the model to the framing you want in the live dashboard, press p, then open the browser DevTools console — the widget logs the exact set(x, y, z) values ready to paste into the Camera fields.
• The widget requires WebGL / hardware acceleration. If the canvas stays blank and the console shows THREE.WebGLRenderer: A WebGL context could not be created, enable hardware acceleration in browser settings (verify support at get.webgl.org).
• Ready-to-use silo and sensor models plus a Claude Code skill that generates new models for any silo count are available in the open thingsboard-silo-glb-models repository — mesh names follow the Silo.001 / Sensor.001 convention out of the box.