こんな感じ。
See the Pen aframe_particle_star by ysko909 (@ysko909) on CodePen.
これを使います。
webVR用のフレームワークA-Frameにはさまざまなサードパーティーのコンポーネントが存在します。その中で、「いろいろ降らせる」コンポーネントを実装します。これを実装することで「雪の降る町」や「チリの舞う荒野」なんかの表現ができます。
preset
の値で粒子の形を変えて降らせることができます。
stars(デフォルト) 星が降ってきます。デフォルトではrainとsnowの中間くらいの落下速度で、粒度がrainより粗いです。そして、粒子が星形。他と異なり、後方で噴水のように噴き出しています。
See the Pen aframe_particle_star by ysko909 (@ysko909) on CodePen.
dust チリっぽい何か。この設定値が一番ゆっくり降ってきます。というか、舞ってます。粒度は以下の2つと同様で、細かいです。チリっていうよりも「ホコリ」っていった方が正確かもしれない。
See the Pen aframe_particle_dust by ysko909 (@ysko909) on CodePen.
snow その名の通り、雪。rainよりゆっくり降ってきます。粒度と粒子はデフォルトではdustと同じっぽく見えます。これはしっかり上から「降って」きます。
See the Pen aframe_particle_snow by ysko909 (@ysko909) on CodePen.
rain その名の通り、雨。snowより早く降ってきます。粒子はいわゆるティアドロップっぽい形。これもしっかり上から「降って」きます。
See the Pen aframe_particle_rain by ysko909 (@ysko909) on CodePen.
<a-entity position="0 2.25 -15" particle-system="preset: dust; texture: ./images/star2.png; color: #0000FF,#00FF00,#FF0000"></a-entity>
画像指定することでテクスチャを貼ることができます。ただ、あんまり粒子が小さい(デフォルトで1)だといまいち判別がつかないような・・・。
粒子の最大経過時間(秒)。これを増やすと、粒子が長時間画面に留まる=画面上の粒子の数が増えます。
粒子の大きさ。デフォルトは1なのだけど、これだと星なのか雪なのかわからないくらい(落下スピードが異なるので、そこで区別はつくけど)なので、変更するとはっきり区別できるようになります。
粒子の色。指定できるけど、2色くらいが見た目的に限度かな、と。あんまりカラフルだと目が疲れる・・・。