HTMLモデル要素の導入

Webサイトにインタラクティブな3Dコンテンツを組み込む際に利用できる、モデル要素の仕組みを学びましょう。モデル要素はiOS、iPadOS、macOS、visionOSで利用可能になりました。3Dアセットの作成と最適化に役立つ各種のツールや、モデル要素に備わる機能について確認するほか、Web上の3Dコンテンツの未来展望にWeb標準がどのように関わっているかを解説します。

リソース

関連ビデオ

WWDC26

WWDC25

空間Webの新機能

WWDC24

USDとMaterialXの新機能

こんにちは Alekseiです Safariチームのエンジニアです。今日はHTML Model elementについて嬉しくご紹介しますデベロッパが3DコンテンツをWebで活用しやすくなる仕組みと Appleの各プラットフォームやその先への展開方法です。

Webデベロッパとして初めて3Dに挑戦する方も熟練の3DアーティストとしてWebに作品を公開したい方も始めるために必要なすべてをご用意しました。 visionOSでModel elementを先行導入しました 3Dモデルを画像と同じくらい簡単に追加できるネイティブHTML要素です。そしてiOS、iPadOS、macOSでも Model elementが使えるようになりました! 同じマークアップ、同じ要素が Appleの全プラットフォームで動作します。 3DコンテンツをSafariのすべての訪問者に届けられます外出先でiPhoneを使っている方にも

カフェでiPadを使っている方にも

デスクでMacを使っている方にも。「model-viewer」はご存知でしょうか今日の3D向けJavaScriptの定番ライブラリです。デベロッパに広く活用されてきましたが Model elementはネイティブです追加ライブラリは不要でプラットフォームが直接レンダリングし visionOSでは立体視レンダリングも組み込みで対応しています。新興のWeb標準でもあるためコードは将来にわたって通用します。 Web全体をカバーするためにポリフィルも用意されています Model elementをまだネイティブでサポートしていないブラウザ向けです。詳細は後ほどご説明します。私が手がけているのはアウトドアアドベンチャー向けの ECプラットフォームです商品の画像はすでに揃っています。今日は商品ページへの 3Dモデル追加をご紹介します。まずアセットの準備方法をご説明します。次にModel elementを詳しく見ていき機能を1つずつ追加しながら体験を構築していきます。最後に本番環境向けにモデルを最適化するコマンドラインツールをご紹介します。では早速始めましょう。

そもそも3Dアセットがない場合はどうすればよいでしょうか? キャプチャ、変換、作成というアプローチをお勧めします iPhoneで実物をスキャンしたり既存ファイルを変換したり Blenderなどのツールでゼロから作成したりできます。生成AIの分野でも革命が起きており求めるコンテンツをまったく新しい方法で作成できるようになりました。実在のオブジェクトに合わせたモデルを画像から生成したりテキストプロンプトでより創造的な生成も可能です。 Tripo3DやMeshy.aiなどさまざまなアプリから選べます。私のストアにはすでに商品がいくつかありますが追加したいものがあります: キャンプ用マレットです。マレットの複数の画像から始め数分後にはモデルが使えるようになりました。 USDZファイルとしてエクスポートしました。 Model elementはUSDZをサポートしており Universal Scene Descriptionを 1つのファイルにまとめたフォーマットです。 3Dモデルに必要なものをすべてパッケージします: ジオメトリ、マテリアル、テクスチャ、アニメーション。 Safariは他のフォーマットもサポートしていますが最良の体験のためには USDZから始めることをお勧めします。ページにモデルを配置してみましょう。マレットのUSDZファイルが準備できました。 Model elementのさまざまな表示方法をご紹介します。モデルの埋め込み方法と表示準備の確認方法とフォールバック処理について説明します。ページデザインへのモデルの合わせ方も。訪問者が操作して探索できるようにしてカスタム変換の実装とアニメーション再生についてもご説明します。 AR Quick Lookと空間コンピューティングでモデルを現実世界に持ち込む方法も。では、モデルの読み込みから始めます。

タグやタグと同様にタグのsource属性でファイルを指定するだけであとはブラウザが処理します。プラグインは不要です。タグを使ってMIMEタイプを指定することもできますタグと同じパターンです。フォールバックについても考えることが重要です。最もシンプルな方法はタグ内にタグを配置することです。古いSafariやModel elementをまだサポートしていないブラウザは代わりに画像を表示します。訪問者にも商品の印象を伝えることができます。 3Dモデルは数十MB以上のサイズになることがあります読み込みに時間がかかる場合があります。 readyプロミスを使えばモデルが読み込まれて表示準備が整ったことを確認できます。読み込み中は視覚的なヒントを表示することをお勧めしますスピナーなどです。 readyプロミスが解決したら非表示にします。予期しないことが起きた場合は catchブロックで処理してフォールバックコンテンツを表示します。モデルの機能をポリフィルすることも可能です。ポリフィルはJavaScriptで新しい標準のAPIを後付けする仕組みですべてのプラットフォームに対応する前から最新機能を使用できます。 W3CのModel elementサンプルにはこの実装例が含まれています。ネイティブ要素がwindowに定義されていない場合ポリフィルライブラリを読み込んでできる限り機能を補いネイティブAPIにできるだけ近い動作を実現します。ポリフィルとネイティブ要素の両方の機能を必ずテストして動作を確認してください。ポリフィルできない機能もあることを念頭に置いてください Apple Vision Proなどの空間プラットフォームでの立体視表示などです。

Model elementは独自の仮想空間でレンダリングされますそのためページの背景は引き継がれません。ページデザインに合わせるには background-colorをmodelに直接設定してください。背景は常に不透明でレンダリングされることに注意してください透明度のある色を指定しても変換されてしまいます。これでモデルが読み込まれ既存のページに統合されました。訪問者がモデルを操作できる機能を追加するのは自然な次のステップです。いかに簡単かをお見せします。

stagemode属性にorbitを指定すると訪問者がモデルを左右に自由に回転させたり上下に傾けたりできます元の角度にゆっくりと戻ります。インタラクティブでありながら常に美しい状態で表示されます。この属性によりモデルは少し小さく表示されます回転中にどの部分も切り取られないよう縮小されます。カスタムのインタラクティビティを追加したい場合があります。 entityTransformプロパティを使うと JavaScriptで正確な視角を設定できます動作を示すためにボタンを2つ追加します: サイドビュー用のボタンとモデルを元の向きに戻すリセットボタンです。 entityTransformを使うには orbitを無効にする必要があります stagemode属性を削除するか"none"に設定します。

モデルを手動で変換すると一部が切り取られることがあります表示エリア外に回転すると消えることもあります。表示されるよう位置を調整する必要があるかもしれません。

変換を実装するためにDOMMatrixを作成しますこれは3D空間でのモデルの向きを表します次にrotateSelfを呼び出して回転を定義します。ここではY軸を中心に135度回転させてサイドビューを取得します。最後にmodel.entityTransformに代入します変更を適用します。

最初に初期変換を取得しておきそれを使ってモデルを元の向きに戻します。

ビューが瞬時に切り替わりました。切り替えをスムーズにするには requestAnimationFrameで回転をアニメーションできます。まずステートを設定します: 現在の角度とミリ秒単位のアニメーション時間 500は0.5秒でキビキビしながらもなめらかに感じます実行中のアニメーションをキャンセルするための参照です。

animateToはまず実行中のアニメーションをキャンセルして遷移が競合しないようにし現在の角度を開始点として記録し開始時刻を記録します。

次にstep関数を追加します。各フレームでアニメーションの進行具合を計算し滑らかな終了のために回転をイージングし新しいDOMMatrixで entityTransformを更新します。アニメーションが続く間は次のフレームをリクエストします。

最後にボタンにanimateToの呼び出しを割り当てます。サイドビューは135度にアニメーションします… リセットは0度に戻ります。実際の動作を見てみましょう。ユーザーがSideボタンをタップするとモデルがスムーズに回転してサイドビューを表示します。 Resetをタップすると元の位置にスムーズに戻ります。カスタム変換とアニメーションで完全なコントロールが可能ですが追加の作業が必要です: バウンディングボックスやクリッピング手動のアニメーションコードなどです。ユースケースが許すなら orbit stagemode属性1つでインタラクティブな3Dが実現します。製品に最適な方法を選んでください。

組み込みアニメーションでモデルに命を吹き込むこともできます。これらのアニメーションは通常BlenderやMayaなどの3Dツールで作成し USDZファイルに焼き込まれています。 Model elementは最初のアニメーショントラックを再生し数行のJavaScriptで再生レートを制御できます負の値を指定することで逆再生も可能です。そのためシンプルなplay関数を実装しますモデルにplaybackRateを設定してモデルのplay()メソッドを呼び出すだけです。正の値で順再生、負の値で逆再生です。ここでは再生を速くするために 5と-5を使っています。

これで、ストアの訪問者はページ上で直接商品を3Dで探索できます。しかし実際の環境での見た目を確認したい場合はどうでしょうか?

タグにrel="ar"属性を指定してモデルをラップし同じリソースを指定すると iOS、iPadOSのユーザーは完全なAR Quick Look体験を得られます。 visionOSではModel elementがすでに3Dコンテンツを Webの自然な一部として体験できるようにしていました。

立体視レンダリングによりモデルに本物の奥行きが生まれます。ユーザーはページから商品を取り出してまるで手の中にあるかのように確認できます。 visionOSはイマーシブなWebサイト環境もサポートしており Model elementを使用してユーザーをシーンの中に没入させることができますすべてSafariから。

この機能についてさらに詳しく知りたい場合は「Explore immersive website environments」セッションをご確認ください。 APIについて詳しく説明しています。

アセットの準備と model elementの配置が整ったらすべてをまとめて確認してみましょう。 3Dモデルを追加したカタログページです。インタラクティブな探索機能が私の個人的なお気に入りです。ユーザーは商品を回転、傾斜させてあらゆる角度から確認し自分の好きな方法で探索できます。すべてSafariで動作します。

商品ページはローカルでは素晴らしく動作していますがインターネット経由では読み込みに時間がかかることがあります。これらのモデルをより小さくできればいいですね。そのためにコマンドラインツールを実行します usdcrushというツールをブーツモデルに対して。品質を変えることなくファイルサイズが7.9 MBから1.9 MBに縮小されます! これは大幅な節約です!

Safariで両バージョンを並べて開くと見た目は同じです。見た目は同じで、ファイルサイズは大幅に小さくなっています。

3Dファイルはあるがまだ画像がない場合は usdrecordツールでサムネイルを生成できますまたはフォールバック画像を直接生成できます出力フォーマットやカスタムカメラからのレンダリングを指定してファイルにカメラが含まれている場合です。スクリーンショットと違いスクリプトで自動化できますまあ、自分で書かなくてもお気に入りのLLMがスクリプトを書いてカタログ全体に適用してくれます。これらのコマンドラインツールはすでにMacにインストールされています。 USDコンテンツを扱うより大きなツールスイートの一部です。これらすべてとUSDエコシステム全体については… WWDC24のセッション「What's new in USD and MaterialX」をご覧ください。 Model elementはvisionOSから始まり iOS、iPadOS、macOSのサポートによって Appleファミリー全体に広がっていますさらにWeb全体にも展開したいと考えています。私たちのチームはW3Cで Model仕様に積極的に貢献しておりぜひみなさんのご意見をお聞かせください。追加してほしい機能や検討していないユースケースがあればぜひフィードバックをお寄せください。 Web標準はデベロッパコミュニティによって形成されますみなさんの声は重要です。 USDZファイル形式の3Dコンテンツについては Alliance of OpenUSDが完全な仕様を公開しており明確でベンダー中立な参考資料です。このアライアンスは変換ツールやリソースも提供しており USDZを既存のコンテンツパイプラインに統合するのに役立ちます。以上がModel elementの概要ですアセットから本番環境まで。次のステップについてお伝えします。

自分だけの3Dモデルを作ってみてくださいテキストプロンプトや手持ちの画像を使って。 Webサイトにタグを追加して USDZファイルを指定して Safariで命が吹き込まれる様子を確認してください。 USDツールを使ってアセットを最適化してください。さまざまなプラットフォームで試して elementの適応を確認してください。 W3CのImmersive Web Community Groupに参加してください。ユースケースやフィードバックアイデアをお持ちください。関連セッションもご覧ください。「Immersive website environments」など。空間Web機能の詳細については WWDC25の「What's new for the spatial web」をご覧ください。皆さんの作るものを楽しみにしています。ありがとうございました素晴らしいWWDCをお過ごしください!

4:19 - Load a model

<!-- Using the src attribute -->
<model src="mallet.usdz"></model>

<!-- Using a <source> child for MIME type -->
<model>
    <source src="mallet.usdz" type="model/vnd.usdz+zip">
</model>

4:39 - Image fallback

<model id="mallet" src="mallet.usdz">
    <img src="mallet.png"
         alt="Rubber mallet with wooden handle">
</model>

5:09 - Ready promise

<model id="mallet" src="mallet.usdz"></model>

<script>
    const model = document.getElementById("mallet");
    model.ready.then(result => {
        // Hide the loading indicator
    }).catch(error => {
        // Loading failed, show fallback
    });
</script>

5:39 - Polyfill fallback

<script type="module">
    if (!window.HTMLModelElement) {
        import("model-element-polyfill.js").then(() => {
            // Polyfill ready to use
        });
    }
</script>

6:13 - Model background

<model id="mallet" src="mallet.usdz"></model>
<style>
    model {
        background-color: #f4f1ec;
    }
</style>

6:47 - Stage mode

<model id="mallet"
       src="mallet.usdz"
       stagemode="orbit">
</model>

7:31 - Custom transforms

<model id="boot" src="boot.usdz"></model>
<button id="button-side">Side</button>
<button id="button-reset">Reset</button>

<script>
    const model = document.getElementById("boot");
    const initialTransform = model.entityTransform;

    document.getElementById("button-side")
            .addEventListener("click", () => {
        const transform = new DOMMatrix();
        transform.rotateSelf(0, 135, 0);
        model.entityTransform = transform;
    });

    document.getElementById("button-reset")
            .addEventListener("click", () => {
        model.entityTransform = initialTransform;
    });
</script>

8:35 - Transition animation

<script>
    const model = document.getElementById("boot");
    const duration = 500;
    let currentAngle = 0;
    let animationId = null;

    function animateTo(targetAngle) {
        if (animationId) cancelAnimationFrame(animationId);
        const startAngle = currentAngle;
        const startTime = performance.now();

        function step(now) {
            const progress = Math.min((now - startTime) / duration, 1);
            const ease = 1 - Math.pow(1 - progress, 3);
            currentAngle = startAngle + (targetAngle - startAngle) * ease;
            model.entityTransform = new DOMMatrix().rotateSelf(0, currentAngle, 0);
            if (progress < 1) animationId = requestAnimationFrame(step);
        }

        requestAnimationFrame(step);
    }

    document.getElementById("button-side").addEventListener("click", () => animateTo(135));
    document.getElementById("button-reset").addEventListener("click", () => animateTo(0));
</script>

10:07 - Animation playback

<model id="bottle" src="bottle.usdz"></model>
<button id="button-play" onclick="play(5)">
    Play
</button>
<button id="button-reverse" onclick="play(-5)">
    Reverse
</button>

<script>
    const model = document.getElementById("bottle");

    function play(rate) {
        model.playbackRate = rate;
        model.play();
    }
</script>

11:06 - AR Quick Look

<a rel="ar" href="bottle.usdz">
    <model id="boot" src="bottle.usdz"></model>
</a>

0:00 - Introduction
The HTML model element, which brings 3D content to the web as simply as an image and now extends from visionOS to iOS, iPadOS, and macOS — how it compares to the model-viewer library and where it stands as an emerging web standard.
2:22 - Prepare the USDZ model asset
Approaches for creating 3D content: scanning with iPhone, converting existing files, authoring in tools like Blender, and generating models from images or text prompts. Why USDZ is the recommended format — it bundles geometry, materials, textures, and animations into a single file.
4:18 - Loading and fallbacks
Embed a model with the tag's src attribute or a nested . Use a nested as a fallback for older browsers, await the ready promise to know when the model can be displayed, and load the W3C polyfill so the element works where it isn't supported natively.
6:14 - Model background
Set background-color directly on the model element to match the surrounding page. The model renders in its own virtual space and doesn't inherit page styles, and any background is composited as fully opaque.
6:48 - Interactions
Add stagemode="orbit" to let visitors rotate the model with automatic spring-back and clipping protection. For custom interactivity, disable stagemode and drive the entityTransform property with a DOMMatrix to snap the model to specific viewing angles from JavaScript.
8:26 - Transition animation
Animate between custom orientations by updating entityTransform inside requestAnimationFrame. The pattern captures a starting angle, eases each frame's rotation, and cancels any in-flight animation so successive transitions don't conflict.
10:08 - Animation playback
Play animations baked into a USDZ file using the element's play() method and playbackRate property. Positive rates play forward, negative rates reverse, and the magnitude scales speed.
10:52 - AR and spatial
Wrap the model in an tag to enable AR Quick Look on iOS and iPadOS. On visionOS the model element renders stereoscopically and can power immersive website environments that place visitors inside a 3D scene.

12:29 - Optimize assets for production
Use usdcrush to shrink USDZ files (often by 4x) with no perceived quality loss, and usdrecord to render thumbnails or fallback images from a 3D file. Both ship with macOS as part of the broader USD tool suite.
14:53 - Next steps
Generate a 3D model from images or a prompt, add a tag to your site, optimize assets with usdcrush, and join the W3C Immersive Web Community Group to help shape the spec.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク