HTML5開発例 - パーティクルアニメーションフローティングフラワーエフェクトのThreeJsコード共有

パーティクル アニメーションは、いくつかの方法で 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 を使用してパーティクルを作成します

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 クラスは常にカメラの方向を向くサーフェスを作成するため、花びらに反転効果を持たせるために反転を使用することはできません。

しかし、花びらに反転効果を追加する必要があります
私の実装のアイデアは、2D 要素が反転すると、実際には X 軸のサイズを圧縮するのと同じになるということです
そこで、現在の X 軸のサイズを設定します
初期変形速度

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

パーティクルを作成したら
CanvasRenderを作成します

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;

また、y にオフセットを追加します。 -axis をレンダリングするたびに
このため、効果は垂直画面に表示される必要があります
そのため、Y 軸の速度が X 軸よりも速くなり、効果が向上します

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
}

この時点で、パーティクルの落下 + 反転のダイナミクスが完成しました。
エフェクト表示領域を超えた場合も、パーティクルを初期位置に再割り当てする必要があります

れぇ

これで、花びらを浮かせるエフェクトが完成です

以上がHTML5開発例 - パーティクルアニメーションフローティングフラワーエフェクトのThreeJsコード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。