HTML5开发实例-ThreeJs实现粒子动画飘花效果代码分享-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

粒子动画在ThreeJs可以用几种方式实现
本次样例使用Sprite类来构建粒子

官方对Sprite类的解释
Sprite
A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.
 
Sprites do not cast shadows, setting
castShadow = true
will have no effect.

大概意思：这个类创建的对象是一个始终面向相机的平面，可以把贴图应用在上面，Sprite对象无法添加阴影，所以castShadow属性无效
首先我们创建场景和相机

container = document.createElement( 'p' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 0, 0, 120 );
scene = new THREE.Scene();

然后用Sprite创建粒子

1	`var textureList=[pic1,pic2,pic3,pic4,pic5,pic6,pic7,pic8,pic9,pic10]`

var textureLoader = new THREE.TextureLoader();
var textureId = parseInt(Math.random()*100)%10
var texture = textureLoader.load(textureList[textureId]);
var particle = new THREE.Sprite( new THREE.SpriteMaterial( { map: texture } ) );

生成随机数，随机获取贴图资源，使用Sprite类创建粒子

particle.position.x = Math.round(Math.random() *winHeight* 1000)%200 +120;
particle.position.y =Math.round(Math.random() *winHeight* 10000)%100 +60;
particle.position.z = Math.random() * 3 - 30;
particle.scale.x = particle.scale.y = Math.round(Math.random() * 50)%5+10 ;

使用随机数给粒子设置位置，大小
因为Sprite类是创建一个始终面向相机的面，也就是说它无法使用翻转使得花瓣有个翻转的效果。

阅读剩余部分