3D商品ショーケースとは？
製品の3Dモデルや画像をアップロードして、回転ビューワーで自由に回して確認できます。実物サンプルなしで、あらゆる角度から製品を見せるのに便利です。
GLBまたはGLTFモデル(Shopify、Sketchfab、macOSのクイックルックなどでも使われる形式)をビューワにドロップするか、4つのサンプル製品から選んで操作を試せます。マウスで回転、ホイールでズーム、右クリックでパン。スタジオライトの強さと背景色を調整したら、好きな角度でスクリーンショットを撮り、商品リストやSNS投稿用のPNGとして書き出せます。
使い方
- 3Dモデルファイル（GLB/GLTF）または製品画像をアップロードしてビューワーに読み込みます。
- マウスまたはタッチ操作でモデルを回転、ズーム、パンします。照明と背景色も調整できます。
- 任意の角度からスクリーンショットを撮り、PNG画像としてダウンロードします。
使用するタイミング
- 実物サンプルが手元に届く前に、ECサイトの商品写真を用意したいとき。
- 量産前にプロトタイプの見え方をクライアントへ提示したいとき。
- ポートフォリオやピッチ資料にインタラクティブな製品プレビューを埋め込みたいとき。
結果
ECショップのオーナーがスニーカーのGLBファイルをアップロードし、最適な斜め45度のアングルに回転させ、スタジオライティングを調整してソールのテクスチャを強調し、商品一覧用の画像としてスクリーンショットを保存します。
よくある質問
- どの3Dファイル形式に対応していますか?
- Khronos Groupが策定したオープン規格のGLBとGLTFです。Blender、Cinema 4D、3ds Max、SketchUpなど主要なモデリングソフトはGLBを直接書き出せます。.objや.fbxはBlenderやオンライン変換ツールで先にGLBへ変換してください。
- モデルは読み込まれたのに真っ黒になるのはなぜ?
- マテリアル情報が欠けているか、法線が裏返っている可能性が高いです。まずはライティングのスライダーを最大にしてみてください。それでも改善しないなら、モデリングソフトでマテリアルを埋め込み、法線を外向きに再計算してから再エクスポートしましょう。
- アニメーションは書き出せますか?静止画だけですか?
- スクリーンショットボタンから静止画PNGのみ書き出せます。回転アニメや動画が必要な場合は、自動回転をオンにしたままOBSやQuickTime、OS標準の画面録画機能でビューワを録画し、必要な部分をトリミングしてください。
- モデルファイルの最大サイズは?
- なめらかに動かしたいなら50MB前後が現実的な上限です。モデル全体が端末のGPUメモリに読み込まれるため、スマホや古めのPCでは20MBを超えると引っかかりが出やすくなります。重いモデルはBlenderでメッシュを減らしてからアップロードしてください。
- モデルはサーバーにアップロードされますか?
- いいえ。ファイルはお使いの端末のメモリ上にあるWebGLキャンバスへ直接読み込まれ、ネットワークを通ることは一切ありません。証拠が必要ですか？インターネット接続を切ってモデルをドロップしてみてください。それでも瞬時に読み込まれます。このページの外へアップロード・記録・保存されるものは何もないからです。