すべてのブログから「#glb」タグの検索結果

こんにちは。 今回は 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 }];あとから高さを変えたい横にずらしたい順番を変えたいといった調整が 数値を変えるだけで可能 です。② アニメーション付きで順番に表示具材は一気に表示せず、下の具材から順に上から落

Three.jsを使って、3D食品モデルが 「下から順番に盛り付けられて完成する」 アニメーション演出を実装しました。 今回のサンプルは、パフェを題材にした ・グラス ・アイス ・ホイップ ・ソース ・フルーツ といった複数のGLBモデルを、 時間差で自然に積み上げていく演出です。 ▼ 実装のポイント ・GLB形式の3Dモデルに対応 ・具材ごとに「出現位置」「最終位置」「動きの速さ」を個別に調整可能 ・下から積む／横から乗せる／上から垂らすなど演出を変更可能 ・Web（Three.js）上でそのまま再生可能 特に「食品サンプル系3D」は、 静止画だけだと魅力が伝わりづらいですが、 完成していく過程をアニメーションで見せることで、 より“美味しそう”“目を引く”表現が可能になります。 ▼ こんな用途におすすめ ・WebサイトやLPのキービジュアル ・ECサイトの商品演出 ・デジタルメニュー／サイネージ ・SNS・動画広告用の3D演出 ・NFT／3D素材販売用デモ動画 現在、 ・お手持ちのGLBモデルを使ったアニメーション実装 ・3D食品モデル＋盛り付け演出のセット制作 どちらも対応可能です。 「こんな動きはできる？」「この料理でも可能？」 など、相談ベースでもお気軽にご連絡ください。

今回は、React Three FiberとGLBモデルを使って、 Webページ上に「幻想的な花の3D背景」と「スクロール連動アニメーション」を取り入れた `Story` ページの作り方を紹介します。 この記事では、以下のような表現を実装していきます。  背景に3種類の花GLBモデルをランダムに配置  花がゆらゆらと回転しながら舞う演出  セクションがスクロールに応じてふわっと出現  GSAPによるアニメーションとThree.jsの融合 ポートフォリオや作品紹介サイトに使える、視覚的に美しい演出です。 使用ライブラリReact 18 / Next.js 13 react-threefiber（Three.jsのReactラッパー）  react-threedrei（補助ツール）  GSAP（アニメーション制御）💠 Step1: 花モデルをランダム配置する背景コンポーネントFlowersBackground.tsxconst flowerModels = [  '/models/flower1.glb',  '/models/flower2.glb',  '/models/flower3.glb',]const Flower = ({ url, position }) => {  const { scene } = useGLTF(url)  const ref = useRef()  useFrame(({ clock }) => {    if (ref.current) {      ref.current.rotation.y = Math.sin(clock