ハロウィンのかぼちゃランプ
くり抜いたかぼちゃの中でろうそくが揺れて、その明るさが見出しとページ全体の明かりに伝わる。マウスで風、クリックで息。洋菓子店のハロウィン予約ページを想定した自主制作です。
使えそうな案件
季節キャンペーンのLPや、商品を3Dで見せる紹介ページ。
使った技術
- 01Three.js（PointLight・MeshStandardMaterial）
- 02GSAP（ticker・quickTo）
- 031/fゆらぎで作る火の揺れ
見え方の違い
- 動きを減らす設定のとき
- 火は揺らさず、明るさを固定した1枚で表示します。
作ってみて分かったこと
炎・中の光・漏れる光・見出しを別々に動かすと、バラバラに見えました。同じ「火の明るさ」の値を全部に渡すようにしたところ、ひとつの火に見えるようになりました。