Web サイトにモデルを埋め込む

Model Vista Lite を使用すると、自分の Web ページに操作可能なモデルを配置できます。閲覧者はモデルを回転し、作成済みの Model Vista ステートを選択できます。ページに必要なのは iframe 1 つです。Web サイト側に JavaScript SDK やビューアーの依存ライブラリを追加する必要はありません。

プレイグラウンドを試す

Embed playground を開きます。
GLB+ コンフィギュレーターを試すには、Model を Helicopter のままにします。Rotors、All Doors、Views を選び、オプションを選択します。
別のホストのモデルを試すには、Try an external model、Apply model の順に選択します。Khronos Damaged Helmet の URL が入力され、読み込まれます。これは Model Vista ステートを含まない標準 GLB なので、設定メニューのないキャンバスを確認できます。プレイグラウンドにはソースとライセンスへのリンクがあります。

モデル URL 入力欄、表示設定、Helicopter のステートパネルを備えた Embed playground

プレイグラウンドのコントロールは埋め込みの表示設定を変更します。プレビュー内で選択したステートはモデルを試すためのもので、生成する iframe には保存されません。新しい埋め込みは、モデルに保存された初期選択を読み込みます。

モデルをホストして読み込む

閲覧者に使用してもらうステートを含む GLB+ をエクスポートします。標準 GLB も使用できますが、埋め込むだけで Model Vista ステートが追加されることはありません。
閲覧者がアクセスできる直接の HTTPS URL でファイルをホストします。ファイル共有のプレビューページではなく、モデルファイル自体の URL を使用します。外部テクスチャやバッファを参照している場合は、それらもホストします。
モデルのホストで、https://modelvista.inno-works.com からのクロスオリジンリソース共有（CORS）を許可します。外部のモデルリソースにも同じ設定が必要です。ビューアーを自分でホストする場合は、顧客ページではなく、そのビューアーのオリジンを許可します。
Model URL に完全な URL を貼り付け、Apply model を選択します。クエリパラメーターは自動的にエンコードされます。この入力欄は、ユーザー名やパスワードを含まない完全な HTTPS URL を受け付けます。
プレビューの読み込みを待ちます。コードをコピーする前に、モデルを回転してオプションを確認します。

入力欄を編集しても、Apply model を選択するまでプレビューとコードは変わりません。付属サンプルに戻すには Model でサンプルを選択します。この手順はホスト済みファイルを参照するもので、Model Vista へのアップロードは行いません。

メニューとビューの表示を設定する

コントロール	変更内容
State layout	Tabbed panel はカテゴリーパネルを重ねて表示し、Below viewer · original はキャンバスの下にオプションを配置します。
Panel side	タブ付きパネルを左右に配置します。下部配置のレイアウトでは無効になります。
Options	Automatic と Thumbnails は利用可能なサムネイルを使用し、ない場合はテキストで表示します。Text buttons はラベルを使用します。
Theme	Light または Dark でコントロールと既定の背景を設定します。
Sun direction (°)	組み込みライトの方位角を `0`～`360` に設定します。
Sun elevation (°)	仰角を `-90`～`90` に設定します。各入力欄を空にすると、その角度の既定値を使用します。
Narrow iframe	幅の狭いプレビューを試します。プレビューの幅だけを変更し、生成コードは変更しません。

メニューの表示設定は Helicopter で確認してください。公開されたステートのないモデルはキャンバスだけを表示します。サムネイルがない場合や読み込みに失敗した場合はテキストボタンになります。iframe の幅が 640px 以下では、タブ付きパネルが下部に移動します。閲覧者は Hide Options で折りたためます。カテゴリータブは矢印キー、Home、End に対応しています。

iframe をページにコピーする

Embed this view の Copy embed code を選択します。自動コピーが利用できない場合は、表示されたコードを選択して手動でコピーします。
ページの HTML、または Web サイトビルダーのカスタム HTML／埋め込みブロックに貼り付けます。
レイアウトに合わせて iframe の高さを調整します。幅を可変にするには width:100% を維持します。モデルを説明する title を設定します。
実際の顧客ページで、デスクトップとタッチスクリーン、狭い幅、モデルの読み込みを確認します。

次の例は、付属の Helicopter をダークパネルで表示します。

<iframe
  src="https://modelvista.inno-works.com/embed.html?model=./assets/InnoWorks/Models/Helicopter/glTF-Binary/Helicopter.glb&amp;statesLayout=panel&amp;statesSide=left&amp;statesStyle=auto&amp;theme=dark"
  title="Interactive helicopter configurator"
  loading="lazy"
  style="width:100%;height:620px;border:0"
></iframe>

自分のモデル用のコードはプレイグラウンドで生成します。iframe URL 内の相対モデルパスは、顧客ページではなくビューアーページを基準に解決されます。ビューアーを自分でホストする場合は iframe 埋め込みを許可し、レスポンスヘッダーの X-Frame-Options や CSP frame-ancestors が顧客サイトをブロックしないようにします。顧客サイトの CSP で frame-src を使用している場合は、そこでもビューアーを許可する必要があります。

埋め込みモデルを操作する

ドラッグで回転し、Shift を押しながらドラッグ、または中ボタンでドラッグしてパンします。
右ボタンでドラッグしてズームします。マウスホイールは周囲の Web ページをスクロールします。
タッチスクリーンでは、1 本指で回転し、2 本指でパンとピンチによるズームを行います。

埋め込みインターフェースには、アップロード、モデル選択、編集ツール、ログイン、AI Enhance はありません。周囲のプレイグラウンドのコントロールは iframe に含まれません。インターフェースは簡略化されていますが、現在はフルビューアーのレンダリングバンドルを共有しています。モデルのサイズやデバイス性能は読み込み時間と応答性に影響します。

任意の URL 設定

プレイグラウンドはメニュー、テーマ、太陽光の設定を URL に書き込みます。次の背景パラメーターを手動で追加することもできます。

パラメーター	値
`hdr`	Radiance `.hdr` 環境の URL。外部ホストには CORS が必要です。
`blur`	HDR 背景のぼかし。`0`～`100`、既定値は `70`。
`background`	`f3f5f9` などの 6 桁の 16 進カラー。`hdr` と併用すると、単色背景でも HDR ライティングを維持します。

メニューパラメーターを指定しない embed.html の既定値は、statesLayout=below、statesSide=left、statesStyle=text です。プレイグラウンドはタブ付きパネルと自動サムネイル表示で始まります。既定のテーマは light です。明示的な背景色はテーマの背景より優先されます。

読み込みのトラブルシューティング

症状	確認事項
URL 検証メッセージ	ユーザー名やパスワードを含まない完全な HTTPS URL を入力します。
“Unable to load this model”	直接の URL、アクセス権、モデルとリソースの CORS、ファイルが有効な対応モデルかを確認します。期限切れやログインが必要なリンクは閲覧者には使用できません。
自分のサイトでビューアーがブロックされる、または空白になる	HTML／埋め込みブロックと、前述の顧客サイトおよびビューアーのホスティングヘッダーを確認します。
設定メニューがない	GLB+ が公開された Model Vista ステートをエクスポートしているか確認します。Damaged Helmet などの標準モデルには含まれません。
コードが以前のモデルを参照している	URL の編集後に Apply model を選択し、コードを再度コピーします。
ホイールでズームできない	ホストページをスクロールするための意図した動作です。右ドラッグまたはピンチでズームします。

その他の形式上の制限は、互換性とトラブルシューティングを参照してください。