实现下雪的效果,就需要一个雪花纹理或者通过canvas绘制的雪花,这里通过给每个粒子设置纹理贴图来实现雪花粒子。
示例:https://ithanmang.gitee.io/threejs/home/201808/20180815/02-rainy-scene.html
效果
1、首先,需要加载纹理。
/* 雪花图片 */
let texture = new THREE.TextureLoader().load('../../textures/particles/snowflake2.png');
2、样式化材质,加入贴图
let pointsMaterial = new THREE.PointsMaterial({
size:5,
transparent:true,
opacity:0.9,
map:texture,
blending:THREE.AdditiveBlending,
sizeAttenuation:true,
depthTest: false
});
3、创建几何体并设置每一个顶点
let geometry= new THREE.Geometry();
let range = 100;
for (let i = 0; i < 1500; i++ ) {
let vertice = new THREE.Vector3(
Math.random() * range - range / 2,
Math.random() * range * 1.5,
Math.random() * range - range / 2);
/* 纵向移动速度 */
vertice.velocityY = 0.1 + Math.random() / 5;
/* 横向移动速度 */
vertice.velocityX = (Math.random() - 0.5) / 3;
/* 将顶点加入几何 */
geometry.vertices.push(vertice);
}
geometry.center();
points = new THREE.Points(geometry, pointsMaterial);
scene.add(points);
4、更新粒子的顶点数据
/* 数据更新 */
function update(