Three.jsで煙のようなエフェクトを作る方法｜ゆらぎの仕組みを完全解説
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;これで奥行き方向にも揺れが出ます。→ 一気に「ただのアニメーション」から「空間的な煙」になります煙っぽくするコツ④：個体差をつけ
0
