three.jsのラインをパーリンノイズで波っぽく作ってみる

three.jsのラインをパーリンノイズで波っぽく作ってみる

こんにちは!

プログラム学習中のdynaです。

 

今回は「three.js」とパーリングノイズの「perlin.js」を使って、lineを波っぽく動かしてみました。

 

デモ↓


デモページ


参考にさせていただいたのはこちらのサイトです。

https://www.pentacreation.com/blog/2020/10/201009.html

大変参考になります。ありがとうございます。

 

 

今までの記事はthree.jsのカテゴリーにまとまっていますので、ご参考までに。


考え方

線をたくさん描画して、それをランダムに動かしただけです。

近くで見たら波には見えませんが、動きのはこんな感じなのか~と思っていただければ。

 

ではコードを見ていきます。

 

three.jsで線を作る

まずはthree.jsで線を書きます。

試しに1本書いてみます。

 


これで表示をすると、こんな感じになります。

白い線が1本書かれているのが分かります。

ラインを表示する

1本線の作り方

ちょっとややこしいので、簡単に記録を。

基本的には、公式のこちらを見るとよくわかります。

https://threejs.org/docs/#api/en/objects/Line

 

  

このブログで書いたコード内で線を作っている部分は、以下の部分です。

 


まずは必要なものの説明を。

 

THREE.Vector3

3Dベクトルを表すクラス。3Dベクトルは、順序付けられた数値のトリプレット(x、y、zのラベルが付いています)であり、次のようなさまざまなものを表すために使用できます。

・3D空間内のポイント。

・3D空間での方向と長さ。three.jsでは、長さは常に (0、0、0)から(x、y、z)までの ユークリッド距離(直線距離)になり、方向も(0、0、0)から( x、y、z)

・任意の順序の数字のトリプレット。

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

BufferGeometry

メッシュ、ライン、またはポイントジオメトリの表現。バッファ内に頂点位置、面インデックス、法線、色、UV、およびカスタム属性が含まれ、このすべてのデータをGPUに渡すコストを削減します。

引用元:https://threejs.org/docs/#api/en/core/BufferGeometry

THREE.Line

実線。

引用元:https://threejs.org/docs/#api/en/objects/Line

THREE.Vector3を使って頂点座標を配列で作成し、その頂点座標を使ってBufferGeometry

で表現します。

それをもとに、THREE.Lineを使って実線で表示します。


THREE.LINEに紹介されているコードそのまま使っている形です。


ちなみに、vector3に頂点を追加すると、こんな感じにいろいろ変更できます。

 

頂点座標の変更

線をたくさん作る

この頂点を使って、たくさんの線を書いてみます。

先ほどの頂点座標の部分を以下に書き換えます。

試しに800本にしてみます。

 


ここでは、forで800本のラインの頂点(x,y,z)を少しづつずらして追加しています。

そのあとラインを描画していきます。

※x、y、zで中心に表示するようにしたりしてるので、少し計算が混じっています。


ここまでで数値を色々動かしてこんな感じになりました。

 

複数の線

 

その線をランダムに動かす

ここまで来たら、この線をランダムに動かしていきたいと思います。

ランダムに動かすには、パーリンノイズを使っていきます。

パーリンノイズは自然な乱数だそうです。


perlin.js を使ってパーリンノイズを作る

参考サイトをもとに、perlin.jsを読み込みます。

https://github.com/joeiddon/perlin

良く思うのですが、ほんと作った人はすごいなと思います・・・。 


読み込めたら設定してみます。

以下は抜粋のコードです。

先ほどの線をたくさん作った部分の変数を引き継いでいます。

 

この部分は以下のサイトも参考にしています。

https://ics.media/entry/18812/


アニメーションさせる

先ほどのコードをアニメーションさせる関数の中に入れておきます。

その後、HTMLにレンダリングを追加描画して完成です。


今までの記事はこちらにありますので、基本的な構成などについては以下に記載しています↓

 

パーリンノイズが面白かったので、色々試してみたいと思います。

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