Use of different colors constrained when scene has a large number of objects

I’m using Three.js in a website that involves different-colored icons coming together to form images. However, I’ve noticed that Three.js restricts the number of different colors that you can use when dealing with numerous objects - and the number of objects increases, the color variance decreases. When more than one thousand objects are added to the scene, every one of them turns white, despite having materials with different colors.

My setup involves SVGLoader constructing an array of Groups, and then later another piece of code cloning those Groups and changing the material color of each Group’s subpath to generate the actual scene objects. Each icon is constructed like this:

// paths = svg paths returned by SVGLoader

let group = new THREE.Group()

for (let path of paths) {
  let material = new THREE.MeshBasicMaterial()
  material.needsUpdate = true

  let shapes = path.toShapes(true)

  for (let shape of shapes) {
    let geometry = new THREE.ShapeBufferGeometry(shape)
    let mesh = new THREE.Mesh(geometry, material)
    group.add(mesh)
  }
}

icons.push(group)

Then the actual scene objects are generated like this:

// r, g, b = random 0-255 color
const object = choose(icons).clone()
for (let child of object.children) {
  child.material.color.setRGB(r / 255, g / 255, b / 255)
}
scene.add(object)

Am I doing something wrong, or is this a known Three.js limitation?
I also have a follow-up performance question: is it bad to generate all the objects that will be part of the scene ahead of time (even if they are initially not visible), or should I clone the icons and add them to the scene only when I immediately need them?

Can you please demonstrate this behavior with a live example?

I’ve never heard of such a limitation so there might be a problem in your application. Do you see any warnings or errors in the browser console? Besides, do you have this issue on different devices/computers and browsers?

Not sure why colors would disappear but this sounds like enough draw calls that performance will drop. Could you set vertex colors on each mesh and share one material? Or better, merge the meshes?