three.jsでパーティクルを作ってみる

three.jsでパーティクルを作ってみる

こんにちは!

プログラミング学習中のdynaです!

今回は Three.jsでパーティクルを作ってみました。 

本を参考にしているので、ちょっと古いかもしれません(汗)

 

デモはこちらです↓※画面をマウスで動かすと回転します

See the Pen パーティクル練習1 by dyna (@sakudyna) on CodePen.


宇宙のチリくずみたい( ^ω^)・・・


プログラム作って動くと面白いですね~(^^)

では、ポイントだけ忘れないように記録に残しておきます!!


※導入の基礎の記事はこちらをご覧ください。

パーティクル作成の部分

作り方としては、

1.ジオメトリ、マテリアルを作成

2.頂点を作成してジオメトリに追加(ここが大事!)

3.メッシュを作成してシーンに追加する(表示する) 

という形です。


THREE.PointsMaterial で頂点の色や見た目を変えられます。

頂点は THREE.Points で管理します。


 ※ジオメトリ、マテリアルって何だっけ??という方はこちらをご覧ください。

各コードで何をしているかはコメント(//部分)をご確認ください。


THREE.Vector3
3Dベクトルを表すクラス。
3D空間内のポイント。
3D空間での方向と長さ。

引用元:

https://threejs.org/docs/#api/en/math/Vector3

PointsMaterial
Pointsが使用するデフォルトのマテリアル。

引用元:

https://threejs.org/docs/#api/en/materials/PointsMaterial

全体のコード

デモにもありますが、さらっと書き残しておきます。

※練習なので、CSSとJSは分けていません。

次はテクスチャはって星空にしたいと思います(^^)*

<追記>

テクスチャの読み込みがセキリュティ的にできなそうだったので、描画してみたのがこちら。

See the Pen by dyna (@sakudyna) on CodePen.

終わってしまったら、右下のReturn押してください(^^)

惑星とか入れたら宇宙旅行みたいになるかな??

 

 

ここまで読んで下さりありがとうございます。

 

<あわせて読みたい>

<three.jsのおすすめ学習本>