How to create foggy objects to achieve the effect of temperature field

I want to create a fog-like object to achieve the temperature field effect. Attached drawings:


As shown in the figure, we know the temperature value of each position in the scene space, and different temperature sections show different colors.

I initially used the following methods to achieve, but the effect is not good:unamused::

var particles = datas.length;
var geometry = new THREE.BufferGeometry();

var positions = [];
var colors = [];

for (let index = 0; index < particles; index++) {

    const element = datas[index];
        positions.push(element.v[0], element.v[2], element.v[1]);//position
    var colorArray = temperature2Color2(element.t);//color
    colors.push(colorArray[0], colorArray[1], colorArray[2]);

geometry.addAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));


var material = new THREE.PointsMaterial({ //ShaderMaterial
    size: 20,
    vertexColors: THREE.VertexColors,
    sizeAttenuation: true,
    // morphTargets:true,
    transparent: true,
    // dithering:true,
    precision: "highp",
    // premultipliedAlpha: true,
    side: THREE.DoubleSide,
    opacity: .25

var points = new THREE.Points(geometry, material);
points.renderOrder = 0; = "scene_pointsTemp"

I really hope to get some good advice about it,Thank you in advance:hugs:.

Maybe try looking up soft particles. Volumetric effects in 3D graphics are in general not an easy task


First of all, thank you. I haven’t used in the project ( soft particles) yet. Before that, I simply modified it to render random colors for each point and found some problems.
We can’t add more points. We have 200,000 points, or even as many as 700,000 points. The following images are 50 points, 100 points and 1000 points. I find that their color overlay is white, which is not what I want. You have a solution.

1 Like

You will need to learn about:

  • overdraw
  • custom material attributes

When you do - you will be able to understand answers to your question.

1 Like

Are you talking about ShaderMaterial implemented with custom shaders?

There are relevant examples for reference.