はじめに
飲食店の食品サンプルはすごく優秀で、立体になることで美味しさも伝わるし大きさのイメージも付きます。
現代はgoogle map等ホームページから来店する人が多いと思うのですが、ホームページでも簡単にそのイメージを実装できればいいなと思いました。3dやCG素人でもできるのかと思い挑戦してみます。
HPの用意
メニューページはサクッとv0で作ってもらいます。
この3d切り替えボタンで、実物イメージを立体で表示するのが今回の目標です。
写真からaiで3dモデリングする
tripo AIというサイトを使います。Meshyというのも精度が良かったのですが、作ったモデルのダウンロードが有料プランでないとできないので、試しの段階ではNGでした。
コンビニのカフェラテの写真を自動でモデリングしました。所要時間は5分くらいです。
写真一枚で、立体なのはもちろん
カップのくぼみやラベルのくしゃっとなってる部分まで細部の表現がなってるのが驚きでした。
blenderで他のassetと組み合わせる
blenderで先ほど3dモデリングしたファイル(glbファイル)をインポートします。
プラスで、大きさのイメージをつけたいので一円玉を素材サイトからダウンロードして取り入れました。
↓素材
ちなみにこの板は机をイメージして形式的に追加しました。
これをthree.jsで表示できるようにglbファイルでエクスポートします。
three.jsで表示
表示部分
<Canvas camera={{ position: [0, 0, 0], fov: 50 }}>
<Suspense fallback={<Html>Loading...</Html>}>
<Environment preset="sunset" background={false} />
<Environment files="other/room.exr" background />
<Model
url={item.model}
scale={1}
position={[0, 0, 0]}
rotation={[0, 0, 0]}
></Model>
</Suspense>
<OrbitControls />
</Canvas>
import { useGLTF } from "@react-three/drei";
import { useRef } from "react";
export const Model = ({
url,
scale,
position,
rotation,
}: {
url: string;
scale: number;
position: number[];
rotation: number[];
}) => {
const groupRef = useRef(null);
const { scene } = useGLTF(url);
return (
<group ref={groupRef}>
<primitive
object={scene}
scale={scale}
position={position}
rotation={rotation}
/>
</group>
);
};
背景イメージについて
先ほどのコードで背景画像を指定している箇所があるのですが、背景は360度回転できる必要があるので、このようなパノラマ画像を用意します。
<Environment files="other/room.exr" background />
exrというファイル形式は高ダイナミックレンジ画像と言って、通常のpngやjpgと違って輝度やZ軸などの要素があり、パノラマ画像を使用するにはexrファイル形式が良いとされているようです。
完成の様子
実際にこのように実物イメージを表示することができました。
もう少しディティールは雑でいいからラベルの文字や色も再現して欲しいなと思いました。（有料プランならできる、？）
もっとブラッシュアップすれば簡単に実装できるのかなーと思います。
背景のHDR画像もstabble diffutionとか使えば自動生成できるらしいのでタイミングがあればまた挑戦したいです。
NCDC株式会社( ncdc.co.jp/ )のエンジニアチームです。 募集中のエンジニアのポジションや、採用している技術スタックの紹介などはこちら( github.com/ncdcdev/recruitment )をご覧ください！ ※エンジニア以外も記事を投稿することがあります
Discussion