Three.jsで煙のようなエフェクトを作る方法｜ゆらぎの仕組みを解説
こんにちは。
今回はThree.jsで「煙のようにゆらゆら動くエフェクト」の作り方を解説します。
一見するとかなり高度な表現に見えますが、実はやっていることはとてもシンプルです。
結論：煙の正体は「波」です
このような煙エフェクトは、実は物理シミュレーションではありません。
正体はこれです👇
sin（サイン波）
cos（コサイン波）
時間（uTime）
位置（pos）
これらを組み合わせて「それっぽく動かしているだけ」です。
基本の考え方
まず、ゆらぎの最小形はこれです。
pos.x += sin(uTime) * 0.2;
これだけで左右に揺れます。
でもこれだと全部が同じ動きなので不自然です。
煙っぽくするコツ①：位置を混ぜる
pos.x += sin(uTime + pos.y * 2.0) * 0.2;
こうすると
上の粒と下の粒で動きがズレる
全体が「うねる」
ようになります。
これが煙っぽさの第一歩です。
煙っぽくするコツ②：波を重ねる
pos.x += sin(uTime + pos.y * 2.0) * 0.2;
pos.x += cos(uTime * 0.7 + pos.y * 4.0) * 0.1;
ポイントは
周期が違う
強さが違う
波を重ねることで、単純な揺れではなく「複雑な流れ」に見えます。
煙っぽくするコツ③：立体的にする
pos.z += sin(uTime * 1.2 + pos.x * 3.0) * 0.1;
これで奥行き方向にも揺れが出ます。
→ 一気に「ただのアニメーション」から「空間的な煙」になります
煙っぽくするコツ④：個体差をつける
float t = uTime + seed;
粒ごとにランダム値（seed）を入れることで、
全部同じ動きになるのを防ぐ
より自然なバラつきが出る
これがかなり重要です。
煙っぽくするコツ⑤：上に流す
pos.y += uTime * 0.5;
さらにループさせると
pos.y = mod(pos.y + uTime, 5.0);
煙が無限に上に流れるようになります。
実はこれだけで「それっぽくなる」
まとめると👇
sin波で揺らす
位置を混ぜる
波を重ねる
ランダムを加える
上方向に流す
これだけで、かなりリアルな煙に見えます。
なぜこれでリアルに見えるのか？
理由はシンプルです。
動きが連続的（sin波）
完全に同じ動きがない（位置 + ランダム）
複雑に見える（波の合成）
つまり、人間の脳が「自然っぽい」と錯覚する仕組みを作っているだけです。
応用するとこうなります
この仕組みを応用すると👇
炎エフェクト
オーロラ
魔法エフェクト
雲
水のゆらぎ
なども作れます。
まとめ
煙エフェクトは難しそうに見えますが、
👉 正体は「波の組み合わせ」
です。
この考え方を理解すると、Three.jsの表現の幅が一気に広がります。
最後に
現在、Three.jsを使った
LP演出
Webサイトの動き
アニメーション制作
などのご依頼も受けています。
「こういう表現を作りたい」などありましたら、お気軽にご相談ください。
