パーティクルアニメーションとは、無数の粒（点）をランダムに散らしたり、文字やロゴの形に並べたり、回転させたりなど様々な形で表現するアニメーションです。
当サイトのパーティクルアニメーションコードジェネレーターでは、プレビューを見ながら、粒子の数・サイズ・速度・色・重力などを調整できます。
また、スクロールに応じて形状が変化する設定ができます。
今回はThree.jsのコードが簡単に生成できるパーティクルアニメーションコードジェネレーターの使用方法を説明いたします。
1.１つ目のジオメトリの設定
1つ目のジオメトリの形状を設定します。
形状の種類は、下記があります。
- Box（箱）
- Sphere（球体）
- Torus（円環）
- Particles（パーティクル）
- Text（テキスト）
- Cone（円錐）
- Cylinder（円柱）
- Icosahedron（二十面体）
ジオメトリの形状以外にも色、回転軸と回転速度。パーティクルの大きさと数の設定が可能です。
2.２つ目以降の追加方法
「スクロール連動」の「スクロール連動」→「モーフィング」をオンにします。
すると、2つ目のジオメトリ以降の形状などの設定が可能です。
1つ目と同様に設定をしていきましょう。
3.コードの使用方法
画面右上の「コードを表示」から現在のパーティクルアニメーションの設定のコードをコピーできます。
3-1.HTMLのコピー
このコードをHTMLファイルにコピーするだけで、先ほど設定したパーティクルアニメーションの設定が完了します。
自作のHTMLに入れ込む場合、下記がスクロールアニメーションの形状変化のタイミングになります。
<div id="scroll-trigger-0" class="scroll-trigger"></div>
<div id="scroll-trigger-1" class="scroll-trigger"></div>
<div id="scroll-trigger-2" class="scroll-trigger"></div>上記の<div id="scroll-trigger-..."></div> 要素をHTMLのbody内の好きな位置に配置することで形状変化を好きなタイミングで変更できます。
3-2.javascriptのコピー
このコードをJavaScriptファイル (例: scene.js) として保存します。
HTMLファイルの<head>内に、Three.jsとGSAPを読み込むためのimport mapを記述します。
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/three@0.164.1/build/three.module.js",
"three/addons/": "https://unpkg.com/three@0.164.1/examples/jsm/",
"gsap": "https://cdn.skypack.dev/gsap",
"gsap/ScrollTrigger": "https://cdn.skypack.dev/gsap/ScrollTrigger"
}
}
</script>スクロールアニメーションを使用する場合は、HTMLと同様に下記を好きな箇所で読み込みます。
<div id="scroll-trigger-0" class="scroll-trigger"></div>
<div id="scroll-trigger-1" class="scroll-trigger"></div>
<div id="scroll-trigger-2" class="scroll-trigger"></div>HTMLの の末尾で、このファイルをモジュールとして読み込みます
<script type="module" src="scene.js"></script>まとめ
当サイトのパーティクルアニメーションコードジェネレーターの使用方法を説明いたしました。
分からないことがございましたら、お気軽にお問い合わせください。