https://redhologerbera.hatenablog.com/entry/2024/07/27/234759

本日はApple枠です。

Apple製品ではUSDZ形式の3Dモデルに対してクイックルックギャラリーと呼ばれる機能が搭載されています。

developer.apple.com

これはUSDZ形式のモデルであれば特定のアプリなどを必要とせず3D表示やAR表示がOSレベルでサポートされています。

つまりUSDZのモデルをウェブページに埋め込むことができれば簡単にモデルの表示が可能ということになります。

今回はGlitchを使用してWebページにUDSZのモデルを生みこんでクイックルックギャラリーで表示できるかを見ていきます。

〇Glitchとは？

Glitchはブラウザ上で無料で使用できるウェブアプリを作成・公開することができるエディタサービスです。

2017年よりサービスが開始され、事前環境構築不要でWebサイトを開発できることから人気が高いサービスです。

glitch.com

〇3Dモデルの準備

今回はテスト用にMixamoからエクスポートしたxbotのモデルをBlenderでUSDZ形式にエクスポートして使用しています。

Glitchで新規プロジェクトを作成し、Assetsページ内にドラッグアンドドロップしてアップロードします。

ファイルを選択し、Copy URLを選択します。

以上で準備ができました。

〇コード

今回は次のようなコードを実行しました。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>USDZ Quick Look</title>
</head>
<body>
    <h1>3D Model Viewer</h1>
    <a href="https://cdn.glitch.global/dd37732f-5639-43a6-84f1-efde9d818b79/test.usdz?v=1721987301846" rel="ar" class="ar-button">
        <img src="quicklook-icon.png" alt="View in AR" style="width: 50px; height: 50px;">
    </a>

    <script>
        // Check if Quick Look is supported
        const arButton = document.querySelector('.ar-button');
        const supportsQuickLook = arButton.relList.supports('ar');

        if (supportsQuickLook) {
            arButton.style.display = 'block';
        } else {
            arButton.style.display = 'none';
            alert('Quick Look is not supported on this device.');
        }
    </script>
</body>
</html>

これによって次のようなウェブページが作成されます。

URLをコピーしてApple VisionProで実行します。

画像を選択すると「この3Dモデルを開きますか？」というダイアログメニューが表示されます。

ここでAllow(uddz QuickKLook Preview)を全宅すると空間にモデルが展開されます。

以上でGlitchでUSDZの3Dモデルをウェブページに埋め込みクイックルックギャラリーを実行できました。

本日は以上です。