Skip to main content
Version: 8.3.2

Mesh model

Chart3D includes a feature for rendering 3D models and objects. These objects can be colored dynamically based on data in real-time.

Mesh modelMesh model

// Creation of mesh model series
const modelSeries = chart.addMeshModel()

Loading model geometry​

Model geometry is supplied using setModelFromObj or setModelGeometry methods. The recommended way is to input model geometry from .obj file format file content and then supply coloring by related material file content.

Parameter to setModelFromObj method is the content of the an .obj file.

fetch('model.obj')
    .then(r => r.text())
    .then(objText => {
        modelSeries.setModelFromObj(objText)
    })

One can also supply geometry by inputting vertices, indices and normals individually. Note that material is not supported when inputting geometry by setModelGeometry call.

// npm i webgl-obj-loader
import { Mesh } from 'webgl-obj-loader'

fetch('model.obj')
    .then(r => r.text())
    .then(objText => {
        const modelParsed = new Mesh(objText)
        modelSeries.setModelGeometry({
            vertices: modelParsed.vertices,
            indices: modelParsed.indices,
            normals: modelParsed.vertexNormals,
        })
    })

Model positioning​

Mesh model positioning is controlled using a number of different methods:

// Example, scale model to 0.1x size, position the models bottom at { x: 0, y: 0, z: 0 }, centered along X and Z axes. 
modelSeries
    .setScale(0.1)
    .setModelLocation({ x: 0, y: 0, z: 0 })
    .setModelAlignment({ x: 0, y: -1, z: 0 })
    .setModelRotation({ x: 0, y: 0, z: 0 })

Model coloring​

Model can be colored in three different ways:

Whichever of the static method is called last will determine static coloring of the model. Coloring by data will overwrite model colors set by either of the two static setters.

Setting model material​

Model material is supplied using setModelMaterial method.

Parameter to setModelMaterial method is content of the related .mtl file.

fetch('model.mtl')
    .then(r => r.text())
    .then(materialText => {
        modelSeries.setModelMaterial(materialText)
    })

Setting fill style​

Fill style will set model to be rendered with single color.

modelSeries.setFillStyle(new SolidFill({ color: ColorRGBA(255, 0, 0) }))

Coloring by data​

The primary use case of LightningChart mesh models is to dynamically color different parts of the model based on an external data set. For example, imagine an airplane model colored by readings from temperature sensors.

// 1) enable coloring based on vertex values
modelSeries.setFillStyle(new PalettedFill({
    lut: new LUT({
        interpolate: true,
        steps: [
            { value: 0, color: ColorRGBA(255, 0, 0) },
            { value: 10, color: ColorRGBA(0, 255, 0) },
        ],
    }),
}))

// 2) load number values associated with every vertex of the model
modelSeries.setVertexValues((vertexWorldLocations) => {
    // Example, return random value for every model vertex
    return vertexWorldLocations.map((locationWorld) => Math.random() * 10)
})

Usually, in real applications the model is placed in a 3D chart where a varying number of "sensors" that generate the data for coloring are situated. The application code then assigns every sensor an axis coordinate (X,Y,Z) and number value (e.g. temperature). Then setVertexValues is used to iterate over every model vertex - for each one, the application finds how close that vertex is to the sensors and interpolates a value for it.

You can find practical examples of this in our online examples:

Textured models​

LightningChart JS mesh models do not currently support displaying textured models. If your use case would require this, please let us know.

3D color shading​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Depth testing​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line

Interactions with data points​

This section works the same as for Line, to avoid duplication of guides, please refer to the section under Line