こんにちは。 今回は Three.jsを使った「パフェの盛り付けアニメーション」 の実装を、ココナラのブログとしてご紹介します。
実はこのパフェ、以前ブログで紹介した 「ハンバーガーを積み上げるアニメーション」 のシリーズ作品です。 「食べ物 × 3D × アニメーション」というテーマで、 見て楽しい・触って楽しいWeb表現 を目指しています。
記事の最後には Short動画（見本デモ） も掲載しているので、 まずは動きを見てから読んでもらえる構成にしています。
🍔 前回のハンバーガー積み上げアニメとの違い
前回は、
バンズ
パティ
レタス
チーズ
といった具材を 上から順に積み上げる構成 でした。
今回のパフェでは、そこから一歩進んで、
グラスの中に具材を「落とす」
高さ・位置・順番を調整できる
盛り付けられていく過程を楽しめる
という より“盛り付け感”のある表現 にしています。
🍓 今回のパフェ盛り付けアニメの特徴
① 具材ごとに位置を個別調整できる
JavaScript側で、以下のように具材を配列管理しています。
const items = [
{ file: "parfait_glass.glb", x: 0, y: 0, z: 0 },
{ file: "strawberry.glb", x: 0, y: 0.3, z: 0 },
{ file: "icecream.glb", x: 0, y: 0.6, z: 0 }
];
あとから
高さを変えたい
横にずらしたい
順番を変えたい
といった調整が 数値を変えるだけで可能 です。
② アニメーション付きで順番に表示
具材は一気に表示せず、
下の具材から順に
上から落ちるように
ふわっと着地
という流れでアニメーションします。
GSAPを使っているので、
落下スピード
バウンド感
出現タイミング
も直感的に調整できます。
③ Short動画と相性がいい
この実装、Short動画との相性がとても良い です。
数秒で「何をしているか」が伝わる
食べ物系で視覚的に強い
ループしても違和感がない
ブログ内には 実際の動作デモ（Short動画） を載せています。
「コード → 動き → イメージ」の流れで、 初心者の方にも伝わりやすい構成を意識しました。
🧑💻 こんな方におすすめ
Three.jsのポートフォリオを作りたい方
Webで“動く演出”を入れたい方
食べ物系の3D表現が好きな方
ココナラで実装サービスを出品したい方
特に、
「普通のWeb制作だけだと差別化しにくい…」
と感じている方には、 こういったミニゲーム・演出系の実装はかなり武器になります。
💡 ココナラではこんな依頼に対応できます
Three.jsを使ったアニメーション演出
商品・料理の3D表現
Webサイトに組み込める軽量な演出
デモ用・ポートフォリオ用の制作
「ハンバーガー」「パフェ」以外にも、 アイデア次第でいろいろ展開できます。
🎬 デモ動画はこちら（Short）
まとめ
今回のパフェ盛り付けアニメは、 前回のハンバーガーシリーズを発展させた形で、
調整しやすい
見て楽しい
Short動画・ブログ・ポートフォリオに使える
という実装になっています。
「こういう表現、Webでできるんだ」 と思ってもらえるきっかけになれば嬉しいです。
ご相談・ご依頼はお気軽にどうぞ 🍨
.jpg)
