Three.jsで食品3Dの「盛り付けアニメーション」を実装しました｜デザート・料理演出に対応

Three.jsを使って、3D食品モデルが

「下から順番に盛り付けられて完成する」

アニメーション演出を実装しました。

今回のサンプルは、パフェを題材にした

・グラス

・アイス

・ホイップ

・ソース

・フルーツ

といった複数のGLBモデルを、

時間差で自然に積み上げていく演出です。

▼ 実装のポイント

・GLB形式の3Dモデルに対応

・具材ごとに「出現位置」「最終位置」「動きの速さ」を個別に調整可能

・下から積む／横から乗せる／上から垂らすなど演出を変更可能

・Web（Three.js）上でそのまま再生可能

特に「食品サンプル系3D」は、

静止画だけだと魅力が伝わりづらいですが、

完成していく過程をアニメーションで見せることで、

より“美味しそう”“目を引く”表現が可能になります。

▼ こんな用途におすすめ

・WebサイトやLPのキービジュアル

・ECサイトの商品演出

・デジタルメニュー／サイネージ

・SNS・動画広告用の3D演出

・NFT／3D素材販売用デモ動画

現在、

・お手持ちのGLBモデルを使ったアニメーション実装

・3D食品モデル＋盛り付け演出のセット制作

どちらも対応可能です。

「こんな動きはできる？」「この料理でも可能？」

など、相談ベースでもお気軽にご連絡ください。