3D Model Viewer：glTF・GLBオンライン

glTF/GLB 3D Model Viewerとは？

glTF/GLB 3D Model Viewerは、.gltfおよび.glb形式の3Dモデルファイルをブラウザで直接開いて確認できるツールです。ソフトウェアのインストール不要、アカウント不要、サーバーへのファイルアップロードも不要です。モデルをドロップゾーンにドラッグするだけで、マウスを使ってすぐにオービット・ズーム・パン操作ができます。Googleのmodel-viewerウェブコンポーネントを使用しており、Google Searchの3D商品プレビューやAR Quick Lookで採用されている本番品質のレンダラーです。5種類の環境照明プリセットの切り替え、露出と影の強度の調整、自動回転のオン/オフ、現在のビューのスクリーンショット出力が可能です。

主な機能

• glTFとGLBのドラッグ＆ドロップ — .gltfまたは.glbファイルをドロップ；対応していない拡張子はロード前にエラーを表示
• オービット・ズーム・パン操作 — 左クリック＋ドラッグでオービット、スクロールでズーム、右クリック＋ドラッグでパン；<model-viewer>要素にcamera-controlsが有効
• 自動回転の切り替え — スイッチで<model-viewer>コンポーネントのauto-rotate属性を有効/無効化；デフォルトはオン
• 5種類の環境照明プリセット — Neutral、Warm、Legacy、Commerce、Spruit Sunrise；environment-image属性に直接マップ
• 露出調整 — 0.1〜3.0のスライダー（ステップ0.1）；デフォルト1.0
• 影の強度調整 — 0.0〜2.0のスライダー（ステップ0.1）；デフォルト1.0；shadow-intensity属性にマップ
• スクリーンショット出力 — modelViewer.toBlob()を呼び出し、{モデル名}_{アスペクト比}_{照明}_{解像度}.pngとして保存
• アスペクト比プリセット — フリー、1:1、4:3、16:9、9:16、3:2、21:9から選択
• 複数のアップロード方法 — 単一の.gltf/.glbファイル、glTFバンドルを含むZIPアーカイブ、フォルダー全体に対応
• Google model-viewer搭載 — PBR（物理ベースレンダリング）マテリアルに対応した本番品質のWebGLレンダリング

glTF/GLB 3D Model Viewerの使い方

ステップ1：3Dモデルを読み込む

glTF/GLB 3D Model Viewerを開きます。ファイルシステムから.gltfまたは.glbファイルをドロップゾーンにドラッグします。ドロップゾーンをクリックしてファイルピッカーを開くこともできます（accept属性は.gltf,.glbに設定）。モデルはローカルのオブジェクトURLを使用して読み込まれるため、ネットワーク経由でデータが送信されることはありません。

対応していない拡張子のファイルをドロップすると、「Invalid file」というトースト通知が表示され、何も読み込まれません。

ステップ2：モデルをナビゲートする

読み込み後、ビューアーは500pxの高さのビューポートにモデルを表示します。マウスで操作します：

• 左クリック＋ドラッグ — モデルの周りをオービット
• スクロールホイール — ズームイン・アウト
• 右クリック＋ドラッグ — カメラをパン

タッチジェスチャーもモバイルで同様に機能します：1本指でドラッグしてオービット、ピンチでズーム、2本指でドラッグしてパン。

モデル名はコントロールパネルに等幅フォントで表示されます。新しいモデルを読み込むをクリックすれば、現在のモデルをいつでもアンロードしてドロップゾーンに戻ることができます。

ステップ3：照明を調整する

右側のコントロールパネルで、名前をクリックして5つの環境照明プリセットから1つを選択します：

選択したプリセットは塗りつぶされた背景でハイライトされます。変更はリロード不要で即座に反映されます。

ステップ4：露出と影を微調整する

照明プリセットの下に、追加のコントロールとして2つのスライダーがあります：

• 露出（0.1〜3.0） — シーン全体の明るさを増減します。1.0がニュートラルな基準値です。暗いモデルを明るくするには1.5〜2.0を試してください。
• 影の強度（0.0〜2.0） — モデルの下に現れる地面の影の鮮明さと暗さを調整します。影を完全になくすには0.0にします。

どちらの値もリアルタイムで<model-viewer>の属性を更新します。

ステップ5：自動回転を切り替えてスクリーンショットを出力する

自動回転トグルスイッチで、モデルを縦軸でゆっくり回転させるか停止するかを切り替えます。自動回転はデフォルトでオンになっており、手を使わずにモデル全体を確認できます。

ビューが希望の位置になったら、スクリーンショットをクリックします。ツールは現在のレンダリングをキャプチャし、モデル名・アスペクト比・照明プリセット・解像度を含むファイル名のPNGファイルとしてダウンロードします。コントロールパネルから特定のスクリーンショット解像度も選択できます：Viewport（現在のサイズ）、720p、1080p、2K、4Kです。

実用的な使用例

ゲームアセットを統合前に確認する

ゲーム開発者がplayer-character.glbというキャラクターモデルを受け取ります。ビューアーにドラッグしてアセットを確認します：Neutralライティングでテクスチャが正しく適用されているか、Warmライティングで屋外シーンのキャラクターの見え方はどうかを確認します。レビューチケットに添付するためにスクリーンショットを出力します。

ECサイト掲載用の商品モデルを確認する

ECチームがサプライヤーから.glb形式の3D商品モデルを受け取ります。ビューアーに読み込み、Commerceライティングプリセット（きれいな商品撮影に最適化）を選択し、明瞭度を上げるために露出を1.4に調整し、柔らかい見た目にするために影の強度を0.5に下げます。商品ページの静的フォールバック画像として使うスクリーンショットを出力します。

BlenderからのglTFエクスポートを検証する

3Dアーティストが.gltfファイルとしてシーンをBlenderからエクスポートし、ビューアーで開いてクイックチェックを行います：エラーなしで読み込まれるか？マテリアルは正しい色でレンダリングされているか？スケールは適切か？オービット操作でどの角度からもすばやく確認できます。Spruit Sunriseプリセットで、自然な屋外光での見え方を検証します。

ヒントとベストプラクティス

スクリーンショット出力のidealAspect: trueパラメーターは、正方形に切り取るのではなく、ビューアーの現在のアスペクト比に合わせてキャプチャ画像を調整します。モデルが縦より横に長い場合、スクリーンショットにその形状が反映されます。

model-viewerウェブコンポーネントは、glTF仕様で定義されたPBR（物理ベースレンダリング）マテリアルをサポートしています。モデルが平坦に見えたり色が薄すぎる場合は、3Dソフトウェアから PBRマテリアル付きでエクスポートされているか確認してください。マテリアルデータなしでエクスポートされたモデルはデフォルトのグレーシェーディングでレンダリングされます。

外部テクスチャ参照を持つ.gltfファイルは、ブラウザがディレクトリ内の他のファイルにアクセスできないため、ファイルピッカーからの読み込みに失敗する場合があります。ブラウザでの確実な読み込みには、すべてのテクスチャを埋め込む.glb形式を使用してください。

ビューアーはモデルのサイズに関わらず500pxの高さでレンダリングします。オービット操作でモデルを位置合わせしてからスクリーンショットを撮ると、実際の表示サイズでキャプチャされます。

よくある問題とトラブルシューティング

「Invalid file」エラー。 ツールは.gltfまたは.glbで終わるファイルのみを受け付けます（.match(/\.(gltf|glb)$/i)による大文字小文字を区別しないチェック）。必要に応じてファイル名を変更するか、エクスポートツールが正しいフォーマットを生成しているか確認してください。

モデルは読み込まれたがテクスチャが表示されない。 .gltfファイル（JSONバリアント）を読み込む場合、関連するテクスチャ画像ファイルとバイナリバッファファイルが同じディレクトリにある必要があります。ブラウザのファイルピッカーは選択した単一ファイルへのアクセスのみを許可し、ディレクトリ全体にはアクセスできません。すべてを1つのファイルにまとめるには.glb形式を使用してください。

「Screenshot error」トーストでスクリーンショットが失敗する。 model-viewer.toBlob()メソッドにはWebGLが必要です。ブラウザでWebGLが無効になっていたり、グラフィックスドライバーがブロックしている場合、スクリーンショットは失敗します。chrome://settings/graphics（Chrome）または使用ブラウザの同等の設定を確認してください。

自動回転が止まらない。 自動回転トグルはauto-rotate属性をリアルタイムで制御します。切り替えても回転が止まらない場合は、モデルをクリックしてカメラ操作を取り戻してみてください（model-viewerのデフォルト動作により自動回転も一時停止します）。

プライバシーとセキュリティ

glTF/GLB 3D Model Viewerは、ブラウザローカルのURL.createObjectURL()を使ってモデルファイルを読み込むため、データがデバイスの外に出ることはありません。Google model-viewerコンポーネントはJavaScriptライブラリとして読み込まれ、WebGL経由でGPU上で完全にレンダリングします。モデルのジオメトリ、テクスチャ、メタデータはいずれもサーバーに送信されません。そのため、独自の3Dアセット、未公開製品、機密性の高い工業デザインの確認にも安全にご使用いただけます。

よくある質問

glTF/GLB 3D Model Viewerは無料ですか？

はい、完全無料です。アカウント不要、利用制限もありません。Glyph Widgetsの無料ツールスイートの一部です。

glTF/GLB 3D Model Viewerはオフラインで動作しますか？

ページが一度読み込まれると（@google/model-viewerコンポーネントを含む）、インターネット接続なしでローカルのモデルファイルを読み込んで表示できます。ビューアーライブラリのダウンロードのため、最初のページ読み込み時にネットワーク接続が必要です。

glTF/GLB 3D Model Viewerでデータは安全ですか？

モデルファイルはURL.createObjectURL()で読み込まれ、WebGLでローカルにレンダリングされます。ジオメトリ・テクスチャ・メタデータのいずれもサーバーに送信されません。Googleのmodel-viewerコンポーネントはブラウザ内で完結して動作します。

ツールはどのファイル形式に対応していますか？

.gltf（JSON＋外部ファイル）と.glb（バイナリ統合形式）のみです。その他の3D形式（.obj、.fbx、.stl、.dae）には対応していません。BlenderやKhronosのglTFコンバーターなどのツールを使ってglTFに変換してから読み込んでください。

glTFとGLBの違いは何ですか？

glTFは外部バイナリバッファとテクスチャ画像を参照するJSONテキストファイルです。GLBはJSON・バッファ・テクスチャを1つのファイルにまとめたバイナリコンテナ形式です。ブラウザでの読み込みには、すべてのアセットが自己完結しているGLBを強く推奨します。

利用可能な照明プリセットは何ですか？

5種類のプリセットがあります：Neutral（バランスの取れたスタジオ照明）、Warm（アンバー/温かみのある色調）、Legacy（クラシックなレンダリング）、Commerce（クリーンでハイコントラストな商品照明）、Spruit Sunrise（自然な屋外光）。これらはmodel-viewerコンポーネントのenvironment-image属性にマップされます。

露出スライダーは何をしますか？

露出はレンダリングされたシーンの全体的な明るさを0.1〜3.0の範囲で調整します。デフォルトは1.0で、1.0を超えるとシーンが明るくなり、1.0未満だと暗くなります。写真やレンダラーの露出設定と同等の機能です。

アニメーション付きのglTFモデルを表示できますか？

model-viewerコンポーネントはglTFアニメーションに対応していますが、Glyph Widgetsのインターフェースにはアニメーション再生コントロールがありません。現在のUIでの動きの機能は自動回転のみです。glTFアニメーションをプレビューするには、Khronos glTF Sample Viewerなどの専用ツールをご利用ください。

スクリーンショットはどの解像度で出力されますか？

コントロールパネルから5つの解像度オプションを選択できます：Viewport（現在の表示サイズ）、720p（1280x720）、1080p（1920x1080）、2K（2560x1440）、4K（3840x2160）。Viewport解像度では、スクリーンショットはビューアーの表示サイズに合わせて出力されます。高解像度では、ツールが一時的にビューアー要素をリサイズして指定解像度でレンダリングし、その後元に戻します。

非常に大きなGLBファイルを読み込めますか？

強制的なサイズ制限はありませんが、大きなファイル（50MB以上）はローカルのオブジェクトURLの生成とmodel-viewerレンダラーの初期化に数秒かかる場合があります。パフォーマンスはブラウザ、GPU、利用可能なRAMによって異なります。

関連ツール

• 近日公開: Image Converter — ビューアーからエクスポートしたスクリーンショットを別の画像形式に変換
• 近日公開: SVG to PNG — 3Dワークフローを補完するSVGベースのデザインアセットを変換
• 近日公開: EXIF Viewer — 3Dモデリングの参考画像として使用する写真のメタデータを確認

今すぐglTF/GLB 3D Model Viewerを試す：Glyph Widgets glTF/GLB 3D Model Viewer