Webページ内に3Dモデルを置く方法は、JavaScriptライブラリだけでなく、HTML側の標準化にも広がっています。
このデモでは、ブラウザ標準の<model>、JavaScriptの代替ライブラリ、静止画表示という3つの経路を同じカード上で切り替えます。実際の3Dモデルファイルは使わず、Canvas上のプレビューとして、ページ内3D表示の設計を確認できるようにしています。
通常プレビュー
ブラウザ標準表示 / 代替ライブラリ / 静止画表示を切り替え、プレビューをドラッグして回転操作の考え方を確認できます。
WebXRデモ
VR空間内に3Dモデルカードを置き、ページ内3Dモデルを空間内に持ち込む時の大きさと距離感を確認できます。
試せること
- ブラウザ標準のmodel要素、代替ライブラリ、静止画表示の役割を切り替えて見る
- プレビューをドラッグし、商品ビューアの回転操作を確認する
- 3D非対応環境でも意味が伝わる静止画カードを確認する
学べること
<model> はWebXRそのものではなく、通常のWebページに3Dモデルを置くためのHTML要素です。
一方で、ページ内3D、AR Quick Look、visionOSの空間Web体験は近い領域にあります。公開ページでは、ブラウザ標準対応だけに依存せず、代替ライブラリや静止画表示を用意しておくと、非対応ブラウザでも体験の入口を失いにくくなります。
対応環境
| 環境 | 状態 |
|---|---|
| Safari 27 beta | 実験検証向け |
| デスクトップChrome / Edge | 代替プレビュー |
| visionOS Safari | 空間Web検証候補 |
実装メモ
- 体験パターン: ページ内3Dモデルのプレビュー
- 描画: Canvas 2Dによる通常プレビュー / Three.jsによるWebXRデモ
- API: HTML
model要素を想定 - 操作: 回転プレビュー
- 代替表示: 代替ライブラリまたは静止画カード
用語メモ
| 用語 | このページでの意味 |
|---|---|
| ブラウザ標準表示 | <model> 要素のように、ブラウザ側の機能で3Dモデルを表示すること |
| 代替ライブラリ | ブラウザ標準表示が使えない時に、JavaScriptライブラリで3D表示を補うこと |
| 静止画表示 | 3Dが使えない環境でも内容が伝わるよう、画像カードとして表示すること |