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.

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
• Renders the meshes one GLB holds; it is a scene view rather than a per-asset detail view

The Silo Monitoring solution template installs a dashboard built around this widget, which is the quickest way to see it working against real entities:

Silo monitoring verified pinkevych.d

How to set up

Data keys

Key	Role	Type	Description
meshId	Mesh mapping	Attribute	Must match the mesh name in the GLB (e.g. Silo.001); required on every entity

Any further keys on the datasource are passed to the color, tooltip and label functions as fields of entity, so they are read by whatever those functions do with them rather than by the widget itself — add the ones your functions branch on. One of them can additionally drive the fill-level animation: name it in Level mesh id and turn on Use level, and the widget reads it as a 0–100 % figure.

Widget settings

Setting	Default	Effect
Model source	Public URL	Where the GLB comes from — a direct URL, or a resource uploaded to Resources library → General and referenced by id
Model URL	the silos_scene model from the models repository below	The GLB the scene is built from
Mesh type	Silo	Prefix that selects which mesh group the widget binds to — Silo for yard meshes, Sensor for cutaway meshes. One GLB may hold both
Camera X / Y / Z	2.5 / 2.5 / 2.5	Initial camera position; use the p shortcut (see Tips) to capture exact values after orbiting to the view you want
Use level / Level mesh id	off / Grain_Volume	Turns on the fill-level animation and names the mesh it drives
Color function	on	f(ctx, entity, entities) returning the hex color for the entity’s mesh
Tooltip function	on	f(ctx, entity, entities) returning the HTML tooltip shown on mesh click
Label function	off	f(ctx, entity, entities) returning the in-scene label 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 Model source. Ensure mesh names follow the Prefix.001, Prefix.002, … convention so they match your entities’ meshId attributes.
• To label the meshes in the scene — turn on Label function and return the markup you want drawn beside each mesh.

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 (support can be checked at get.webgl.org).
• The shipped Model URL points at the thingsboard-silo-glb-models repository, which also holds the sensor cutaway model and a generator for other silo counts — mesh names there follow the Silo.001 / Sensor.001 convention out of the box.