HTML5开发实例-ThreeJs实现粒子动画飘花效果代码分享

官方对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.

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();

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 } ) );

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 ;

particle.sizeX = particle.scale.x;

particle.xScaleSpeed = -0.08;

for ( var i = 0; i < 30; i ++ ) {

    var textureLoader = new THREE.TextureLoader();

    var textureId = parseInt(Math.random()*10);

    var texture = textureLoader.load(textureList[textureId]);

    var particle = new THREE.Sprite( new THREE.SpriteMaterial( { map: texture } ) );

    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 ;

    particle.sizeX = particle.scale.x;

    particle.xScaleSpeed = -0.08;

    particle.speed = Math.round(Math.random()*10)/50;

    particles.push(particle);

    scene.add( particle );

}

renderer = new THREE.CanvasRenderer({alpha:true});

renderer.setClearColor("#ffffff",0);

renderer.setPixelRatio( window.devicePixelRatio );

renderer.setSize( window.innerWidth, winHeight );

container.appendChild( renderer.domElement );

particles[i].position.x+=particles[i].speed;

particles[i].position.y-=particles[i].speed+0.1;

particles[i].scale.x += particles[i].xScaleSpeed;

if(particles[i].scale.x <-particles[i].sizeX){

    particles[i].xScaleSpeed = 0.08

}

if(particles[i].scale.x >=particles[i].sizeX){

    particles[i].xScaleSpeed = -0.08

}

if(particles[i].scale.x <0.3&&particles[i].scale.x >0){

    particles[i].scale.x=-0.3

}

if(particles[i].scale.x >-0.3&&particles[i].scale.x <0){

    particles[i].scale.x=0.3

}

if(particles[i].position.y<-100||particles[i].position.x>50|particles[i].position.z>150){

    particles[i].position.x = -Math.round(Math.random() *winWidth* 1000)%(winWidth);

    particles[i].position.y = Math.round(Math.random() *winHeight* 1000)%200 +120

    particles[i].position.z = Math.random() * 5 - 30;

    particles[i].speed=Math.round(Math.random()*10)/30;

}