If you're looking to create circles using PointsMaterial, one method is to use a texture as the map. However, another approach is to dynamically generate the map with a canvas, which seems to be what the provided code is attempting to do.
Check out this fiddle where I updated your code to utilize a canvas for the texture map. Please note that I modified the colors in the parameters object to showcase different color variations.
The function below demonstrates how to create a circle on a canvas that can be used as a map:
function createCanvasMaterial(color, size) {
var matCanvas = document.createElement('canvas');
matCanvas.width = matCanvas.height = size;
var matContext = matCanvas.getContext('2d');
var texture = new THREE.Texture(matCanvas);
var center = size / 2;
matContext.beginPath();
matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
// Additional code for filling and updating texture
return texture;
}
The loop initializes the materials array based on the parameters object:
for (i = 0; i < parameters.length; i++) {
// Code to extract color and size values from parameters
materials[i] = new THREE.PointsMaterial({
size: 20,
map: createCanvasMaterial('#'+hexColor, 256),
transparent: true,
depthWrite: false
});
// Additional code for creating particles and adding them to the scene
}
Remember to set depthWrite to false in the material settings. For more insights, refer to this thread.
For further details on creating circular particles with Three.js using canvas, check out my blog post here.