As others have said, you can use a texture as the map in your PointsMaterial.
But if you just want circles, an easier method may be to create the map dynamically with a canvas (which is what the code you posted seems to be trying to do).
HERE is a fiddle with your code updated to use a canvas as your texture map.
NOTE: I have changed the colors in your paramters object to make it more obvious that different colors are being used.
The function that creates a circle on a canvas for use as a map.
function createCanvasMaterial(color, size) {
var matCanvas = document.createElement('canvas');
matCanvas.width = matCanvas.height = size;
var matContext = matCanvas.getContext('2d');
// create exture object from canvas.
var texture = new THREE.Texture(matCanvas);
// Draw a circle
var center = size / 2;
matContext.beginPath();
matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
matContext.closePath();
matContext.fillStyle = color;
matContext.fill();
// need to set needsUpdate
texture.needsUpdate = true;
// return a texture made from the canvas
return texture;
}
map canvas creation in the loop using the parameters object.
for (i = 0; i < parameters.length; i++) {
color = parameters[i][0];
size = parameters[i][1];
var hexColor = new THREE.Color(color[0], color[1], color[2]).getHexString();
materials[i] = new THREE.PointsMaterial({
size: 20,
map: createCanvasMaterial('#'+hexColor, 256),
transparent: true,
depthWrite: false
});
particles = new THREE.Points(geometry, materials[i]);
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
particles.rotation.z = Math.random() * 6;
scene.add(particles);
}
Have to set depthWrite to false on the marterial. see THIS issue.
I have now created a blog post on Three.js canvas particles