如何在 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)
只要你的点坐标是随机的,这就有效
我正在使用 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)
只要你的点坐标是随机的,这就有效