HTML5 development example-ThreeJs code sharing for particle animation floating flower effect-H5 Tutorial-php.cn

HTML5 development example-ThreeJs code sharing for particle animation floating flower effect

黄舟

Release： 2017-03-17 16:26:13

Original

4513 people have browsed it

HTML5 development example-ThreeJs code sharing for particle animation floating flower effect

Particle animation can be implemented in ThreeJs in several ways
This example uses the Sprite class to build particles

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

Copy after login

About the meaning: the object created by this class It is a plane that always faces the camera, and textures can be applied to it. Sprite objects cannot add shadows, so the castShadow attribute is invalid
First we create the scene and camera

container = document.createElement( &#39;p&#39; );
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();

Copy after login

Then use Sprite to create particles

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

Copy after login

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

Copy after login

Generate random numbers, randomly obtain texture resources, and use the Sprite class to create particles

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 ;

Copy after login

Use random numbers to set the position and size of the particles
Because the Sprite class creates a surface that always faces the camera, that is It says that it cannot use flipping to make the petals have a flipping effect.

But I need to add a flipping effect to the petals
My implementation idea is that when the 2d element is reversed, it is actually equivalent to compressing the size of its x-axis
So I set a The size of the current x-axis
and the initial deformation speed

particle.sizeX = particle.scale.x;
particle.xScaleSpeed = -0.08;

Copy after login

The following is the code for initialization of all particles

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

Copy after login

After creating the particles
Create canvasRender

renderer = new THREE.CanvasRenderer({alpha:true});
renderer.setClearColor("#ffffff",0);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, winHeight );
container.appendChild( renderer.domElement );

Copy after login

because Prepare to let the petals fall from the upper left to the lower right, so every time you render the picture, you need to offset the petals to the lower right

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

Copy after login

This speed is randomly generated when I create the particles, in order to let the petals The speed of each piece is different

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

Copy after login

Add an offset to the y-axis every time it is rendered,
Because this effect needs to be displayed on a vertical screen,
so the y-axis speed ratio The effect will be better if the x-axis is faster

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

Copy after login

Then add a deformation amount to the particle shape each time it is rendered

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
}

Copy after login

It is necessary to simulate the effect of petals flipping. When the current deformation amount exceeds the original When changing the size, the deformation direction is changed to the opposite direction (from being larger to smaller)

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
}

Copy after login

At this point we have completed the dynamics of falling + flipping particles.
We also need to reassign the particles to an initial position when they exceed the effect display area

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

Copy after login

In this way, the effect of floating petals is
completed

The above is the detailed content of HTML5 development example-ThreeJs code sharing for particle animation floating flower effect. For more information, please follow other related articles on the PHP Chinese website!