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

Question

我正在使用 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
})

谢谢！

Answer 1

如果您想制作具有多种颜色的星星，我只需创建 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)

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

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

how to map multiple png texture in ThreeJS

three.js

webgl

texture-mapping