Partikelanimation kann in ThreeJs auf verschiedene Arten implementiert werden
In diesem Beispiel wird die Sprite-Klasse verwendet, um Partikel zu erstellen
官方对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.
Über die Bedeutung: Diese Klasse erstellt Das Objekt ist eine Ebene, die immer der Kamera zugewandt ist, und Texturen können darauf angewendet werden. Sprite-Objekte können keine Schatten hinzufügen, daher ist das castShadow-Attribut ungültig.
Zuerst erstellen wir die Szene und die Kamera
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();
Verwenden Sie dann Sprite, um Partikel zu erstellen
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 } ) );Generieren Sie Zufallszahlen, erhalten Sie zufällig Texturressourcen und verwenden Sie die Sprite-Klasse, um Partikel zu erstellen
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 ;
Verwenden Sie Zufallszahlen, um die festzulegen Position und Größe der Partikel
Aufgrund der Sprite-Klasse wird eine Oberfläche erstellt, die immer der Kamera zugewandt ist, was bedeutet, dass das Umdrehen nicht verwendet werden kann, um den Blütenblättern einen Umdrehungseffekt zu verleihen.
Aber ich muss den Blütenblättern einen Umkehreffekt hinzufügen
Meine Implementierungsidee ist, dass die Umkehrung des 2D-Elements tatsächlich einer Komprimierung seiner x-Achsengröße entspricht
Also habe ich a festgelegt Die Größe der aktuellen x-Achse
und die anfängliche Verformungsgeschwindigkeit
particle.sizeX = particle.scale.x; particle.xScaleSpeed = -0.08;
Das Folgende ist der Code für die Initialisierung aller Partikel
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 );
}Nach dem Erstellen der Partikel
CanvasRender erstellen
renderer = new THREE.CanvasRenderer({alpha:true});
renderer.setClearColor("#ffffff",0);
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, winHeight );
container.appendChild( renderer.domElement );Da die Blütenblätter von oben links nach unten rechts fallen, muss ich die Blütenblätter jedes Mal nach unten rechts verschieben, wenn ich den Bildschirm rendere
particles[i].position.x+=particles[i].speed;
Diese Geschwindigkeit wird zufällig generiert, wenn ich die Partikel erstelle.
particles[i].position.y-=particles[i].speed+0.1;
Füge bei jedem Rendern einen Versatz zur Y-Achse hinzu,
aus diesem Grund Der Effekt muss auf einem vertikalen Bildschirm angezeigt werden.
Damit die Geschwindigkeit der y-Achse schneller ist als die der x-Achse und der Effekt besser ist.
particles[i].scale.x += particles[i].xScaleSpeed;
Fügen Sie dann einen Verformungsbetrag hinzu Form der Partikel bei jedem Rendern
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
}Es ist notwendig, den Effekt des Umdrehens der Blütenblätter zu simulieren. Wenn die aktuelle Verformung die ursprüngliche Größe überschreitet, wird die Verformungsrichtung in die entgegengesetzte Richtung (von Sein) geändert größer zu kleiner)
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
}An diesem Punkt haben wir das Fallen der Partikel + Flip-Dynamik abgeschlossen.
Wir müssen die Partikel auch wieder einer Anfangsposition zuordnen, wenn sie den Anzeigebereich des Effekts überschreiten
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;
}Auf diese Weise ist der Effekt schwebender Blütenblätter
vollständig
Das obige ist der detaillierte Inhalt vonHTML5-Entwicklungsbeispiel – ThreeJs-Codefreigabe für den Partikelanimations-Floating-Flower-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
ntuser.dat hat die Wiederherstellungsmethode gelöscht
WLAN zeigt keinen Zugang zum Internet an
Detaillierte Erklärung des Befehls imp in Oracle
So verwenden Sie DataReader
Welche Dateitypen gibt es?
So öffnen Sie eine NRG-Datei
