こんにちは、くりちゃんです。 今回はThree.jsを使って画像からパーティクルアニメーションを実装したいと思います。パーティクルアニメーションを実装するうえでパーティクル一個一個の位置情報は絶対必要になりますよね。前回の記事ではジオメトリーを元に位置情報を設定していましたが、今回は画像から位置情報を抜き取ります。 そこでCanvasAPIのgetImageDataというメソッドを使用してcanvas要素からピクセル情報をImageDataオブジェクトの形式で取り出します。 試しにLIGのロゴ画像を用意してピクセル情報を取得してみます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const width = 868; const height = 464; can
![Three.jsを使って画像からパーティクルアニメーションを実装する | 株式会社LIG(リグ)|DX支援・システム開発・Web制作](https://cdn-ak-scissors.b.st-hatena.com/image/square/c9a523013e1d8948d38641904f185ff537989de2/height=288;version=1;width=512/https%3A%2F%2Fliginc.co.jp%2Fwp-content%2Fuploads%2F2021%2F10%2F7e1137577dbdc84090f0d1fbe47eceb8.png)