threejs 应用顶点着色打造绚丽多彩的星空

今天我们要实现造绚丽多彩的星空的效果，星空是由五颜六色的星星组成的，所以我们来创建星星。

随机生成点

首先使用 THREE.BufferGeometry 创建5000个随机点，使用Float32Array来生成缓冲区数组。

const particlesGeometry = new THREE.BufferGeometry()
const count = 5000

// 设置缓冲区数组
const positions = new Float32Array(count * 3);

设置顶点

使用随机方法Math.random()来生成随机数用来生成星星的位置


for (let i = 0; i < count * 3; i++) {
    positions[i] = (Math.random() - 0.5) * 100;
}

particlesGeometry.setAttribute('position',
  new THREE.BufferAttribute(positions, 3)
)

生成星星的颜色

使用随机方法Math.random()来生成随机数用来生成星星的颜色

for (let i = 0; i < count * 3; i++) {
    colors[i] = Math.random()
}

particlesGeometry.setAttribute('color',
  new THREE.BufferAttribute(colors, 3)
)

颜色设置完成后，我们还需要设置vertexColors让其开启。

// 设置启动顶点颜色
pointMaterial.vertexColors = true

绚丽多彩的星空演示地址

threejs 应用顶点着色打造绚丽多彩的星空

接下来我们来实现漫天飞舞的雪花

绚丽多彩的星空实例代码下载

代码开发环境基于vue3 vite js nodejs 14

请确保有一定的代码基础