如何在 ThreeJS 中映射多个 png 纹理

how to map multiple png texture in ThreeJS

我正在使用 Three.js 粒子,并尝试映射多个 png 纹理,(我的 png 图像只是不同颜色的星星,以创造一个充满星星的天空) 我的代码如下所示:

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)

仅映射一个元素“cross”即可正常工作。 我的问题是,我怎样才能映射多个图像来获得随机混合? 像 :

const particlesMaterial = new THREE.PointsMaterial({
    size: 0.02,
    map: cross, cross2, cross3
    transparent: true
})

谢谢!

如果您想制作具有多种颜色的星星,我只需创建 3 个点网格实例,每个实例都包含各自的纹理。

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)

只要你的点坐标是随机的,这就有效