Exemple de développement HTML5 - Partage de code ThreeJs pour l'effet de fleur flottante d'animation de particules

L'animation de particules peut être implémentée dans ThreeJs de plusieurs manières
Cet exemple utilise la classe Sprite pour créer des particules

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

À propos de la signification : Cette classe crée L'objet est un plan qui fait toujours face à la caméra, et des textures peuvent lui être appliquées. Les objets Sprite ne peuvent pas ajouter d'ombres, donc l'attribut castShadow n'est pas valide
Nous créons d'abord la scène et la caméra

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

Utilisez ensuite Sprite pour créer des particules

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

Générez des nombres aléatoires, obtenez des ressources de texture au hasard et utilisez la classe Sprite pour créer des particules

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 ;

Utilisez des nombres aléatoires pour définir le position et taille des particules
En raison de la classe Sprite, elle crée une surface qui fait toujours face à la caméra, ce qui signifie qu'elle ne peut pas utiliser le retournement pour donner aux pétales un effet de retournement.

Mais je dois ajouter un effet de retournement aux pétales
Mon idée d'implémentation est que lorsque l'élément 2D est inversé, cela équivaut en fait à compresser sa taille sur l'axe des x
J'ai donc défini un La taille de l'axe x actuel
et la vitesse de déformation initiale

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

Ce qui suit est le code pour toute initialisation de particules

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

Après la création des particules
Créer un rendu de toile

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

Étant donné que les pétales vont tomber du coin supérieur gauche vers le coin inférieur droit, je dois déplacer les pétales vers le bas à droite à chaque fois que je rends l'écran

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

.

Cette vitesse est aléatoire lorsque je crée les particules. Générée pour rendre la vitesse de chaque pétale différente

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

Ajoutez un décalage à l'axe y à chaque fois qu'il est rendu,
parce que cela l'effet doit être sur un écran d'affichage vertical,
Ainsi, la vitesse de l'axe y sera plus rapide que l'axe x, et l'effet sera meilleur

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

Ajoutez ensuite une quantité de déformation au forme des particules à chaque rendu

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
}

Il est nécessaire de simuler l'effet de retournement des pétales. Lorsque la déformation actuelle dépasse la taille d'origine, la direction de la déformation est modifiée dans la direction opposée (au lieu d'être). plus grand à plus petit)

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
}

À ce stade, nous avons terminé la chute des particules.
Nous devons également réaffecter les particules à une position initiale lorsqu'elles dépassent la zone d'affichage de l'effet

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

De cette façon, l'effet des pétales flottants est
complet

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!