how to map multiple png texture in ThreeJS - three.js

Question

Im working with Three.js particles , and trying to map multiple png textures, (my png images are juste différent colors stars to create a sky full of stars)
my code looks like this :
const loader = new THREE.TextureLoader();
const cross = loader.load ('./cross1.png');
const cross2 = loader.load ('./cross3.png');
.
.
.
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
map: cross,
transparent: true
})
// Mesh
const sphere = new THREE.Points(geometry,material)
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial)
scene.add(sphere, particlesMesh)
it works fine with only maping one elmement "cross" .
my question is, how can i MAP multiple images to get like a random mix please ?
something like :
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
map: cross, cross2, cross3
transparent: true
})
THANKS !

Answer 1

If you are looking to make stars with multiple colors I would just create 3 instances of points mesh with each one containing their respective textures.
const particlesMaterial = new THREE.PointsMaterial({
size: 0.02,
map: cross,
transparent: true
})
const particlesMaterial2 = new THREE.PointsMaterial({
size: 0.02,
map: cross2,
transparent: true
})
const particlesMaterial3 = new THREE.PointsMaterial({
size: 0.02,
map: cross3,
transparent: true
})
const particlesMesh = new THREE.Points(particlesGeometry, particlesMaterial)
const particlesMesh2 = new THREE.Points(particlesGeometry, particlesMaterial2)
const particlesMesh3 = new THREE.Points(particlesGeometry, particlesMaterial3)
scene.add(particlesMesh, particlesMesh2, particlesMesh3)
this works as long as your point coordinates are randomized