Thermal vision of an object

Questions
1

Greetings to all.

First of all, I apologize for my lack of knowledge, I’m new to ThreeJS.

I’m trying to find a way to paint a geometric shape based on temperature sensors. This object, in practice, looks like a cylinder/pipe. The effect I’m looking for is something very similar to the one demonstrated in this video:

https://www.youtube.com/watch?v=nimByoIeRJg

image

I will have the X,Y,Z position information and temperature in degrees Celsius of each sensor, in a json array or something similar. These X,Y,Z positions correspond to points on the object that I want to paint.
To create this object I’m using ExtrudeGeometry, using a function like this:

const CreatePipe = (props: PipeProps) => {
  const _props = { ...defaults, ...props };
  let pipeShape = new THREE.Shape();
  pipeShape.absarc(0, 0, _props.externalRadius, 0, Math.PI * 2);
  pipeShape.holes.push(new THREE.Path().absarc(0, 0, _props.internalRadius, 0, Math.PI * 2, true));
  let geometry = new THREE.ExtrudeGeometry(pipeShape, {
    curveSegments: _props.curveSegments,
    depth: _props.depth,
    bevelEnabled: false,
    steps: _props.steps
  });
  geometry.center();
  geometry.computeVertexNormals();

  let colors = [];
  for (var i = 0, n = geometry.getAttribute('position').count; i < n; ++i) {
    colors.push(1, 1, 1);
  }
  geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

  return geometry;
}

which results in something like:

image
image919×668 7.1 KB

My first question is: By creating the object this way, will it be possible to obtain the effect I’m looking for? Or would it be better to use models imported from Blender or something like that?

I managed to make the user define the sensor positions by clicking on points of the object with the mouse, and assign random temperatures to each point, to test. Then I tried using MeshLambertMaterial with vertexColors = true to apply the colors. But the final result didn’t look very similar to the one in the video. From what I could tell when using ExtrudeGeometry, everything is divided into several triangular faces, so when applying the color to different points, these triangular fragments are exposed:

image

Is it possible to achieve something similar to the video?
What is the best way?

2

You can smooth the colors of triangles by using indexed geometry. Thus setting the color of individual vertex will color with gradient all triangles sharing this vertex. Here is a demo of indexed vs non-indexed geometry:

https://codepen.io/boytchev/pen/GRwMdPj

image

However, the triangular nature of the mesh is still visible.

Alternative (more complex) approach is to have a canvas texture where you draw gradient circles (one for each sensor). Then this texture is mapped onto the object. This relies on the object to have good UV coordinates of vertices.

A third alternative is to use detailed mesh of vertices and set vertex color based on distance to sensors. Thus one sensor will affect several vertices.