how to map multiple png texture in ThreeJS

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