↓↓完成内容

iPhone(IOS15)でAR表示してみた
↓↓

Android12でAR表示してみた
↓↓
まず床認識

オブジェクトを配置（3Dオムライスを表示）

↓↓こちらから実際に触る事ができます。
https://nonomelet.netlify.app

↓↓スマホでも動きます。
ARは、iOS 12以降のAR Kitが動く端末、AndroidはAR Coreが動く端末で動作できます。

試した事

1.Blenderで3Dモデルのサイズを小さめにしました。

2.Blenderで3Dモデルを全トランスフォームで適用する（位置、回転、スケールの初期化）

3.Blenderからgltfにエクスポートする

4.gltfをReality Converterアプリでusdzに変換する

なお、ARにするとテクスチャが少し暗めになるので、明るめに色をつけました。

以下、簡単なメモ書きですが調べたことを記載してます。

model-viewerプロパティ

Android

model-viewerのAndroidではScene Viewerを使います。
glTF / glb モデルがサポートされています。

AR Quick Look

model-viewerのiOSではAR Quick Lookを使用します。
AR Quick Lookで表示するには、usdzと呼ばれる3Dモデルフォーマットで、
AR Quick Lookで見られるようにするにはusdzのモデルを用意する必要があります。

AR Quick Look usdzを使った3Dモデルの例が載っています
https://developer.apple.com/jp/augmented-reality/quick-look/

Reality Converter（リアリティコンバータ）

AR Quick Lookで表示するusdz形式の3Dモデルを作るには、
MacでApple製のReality Converter（リアリティコンバータ）アプリを使って一般的な3Dファイル形式（.obj、.gltf、.usd)をドラッグ＆ドロップするとusdz形式に変換します。

Mac版）Reality Converter　ダウンロード
https://developer.apple.com/augmented-reality/tools/

3Dモデルのプレビュー表示

gltfやglb形式の3Dモデルを下記のサイトでDrag&Dropするとプレビュー表示します。
glTF Viewer
https://gltf-viewer.donmccurdy.com/

model-viewer

WebおよびARでインタラクティブな3Dモデルを簡単に表示します

camera-controls（カメラコントロール）

ブラウザで３Dモデルをマウスやタッチによるコントロールを有効にする

camera-orbit（カメラ軌道）

３Dモデルからの距離を制御できます。

ar-modes

有効にするARエクスペリエンスのタイプの優先リスト。
「webxr」ブラウザでARエクスペリエンスを起動。
「scene-viewer」シーンビューアアプリを起動。
「quick-look」iOS Quick Lookアプリを起動。

src

3DモデルへのURLでglTF / glb モデルのみがサポートされています。
glTF / glbはWebブラウザ上で3Dモデルを扱う際に用いられるフォーマットです。

ios-src

iOSのAR Quick Lookで表示する3DモデルのURLでusdz モデルのみがサポートされています。

poster（ポスター）

ロード時に3Dモデルの代わりに画像を表示します。ロードが終わったら3Dモデルを表示します。

alt

画面読み上げソフト、スクリーンリーダーを使用する視聴者にモデルを説明するために使用します。

shadow-intensity（シャドウ強度）

影の不透明度を制御します。シャドウを完全にオフにするには、0に設定します。

ar

サポートされているデバイスでARエクスペリエンスを起動する機能を有効にします。

quick-look-browsers

chrome、safariはiOS ChromeやsafariからAR Quick Lookを起動します。

auto-rotate（自動回転）

モデルの自動回転を有効にします。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>non omelet model-viewerデモ</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  </head>
  <body>
    <style>
      model-viewer {
      width: 960px;
      height: 540px;
      background-color: #CC99CC;}
    </style>
      <model-viewer 
      camera-controls camera-orbit="-30deg 50deg 10m"
      ar-modes="scene-viewer webxr quick-look"
      src="assets/models/omelet.gltf"
      ios-src="assets/models/omelet.usdz"
      poster="assets/loding.gif"
      alt="non omelet"
      shadow-intensity="1"
      ar 
      quick-look-browsers="safari chrome"
      auto-rotate>
    </model-viewer>
  </body>
</html>

🌟Blender🌟
Blenderで💕オムライス💕作ってみたよぉ😍
このオムライスでいろいろ遊んでみるよぉ🤩

↓↓作り方⭐️ざっくり解説🐹https://t.co/Pia5NBmcPx #blender #blender3d #3DCG #b3d #オムライス pic.twitter.com/R2n9uyRYDp
— non (@nonnonkapibara) April 18, 2022

🖥️3Dモデル Web📲
Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊
オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍

↓↓作業メモhttps://t.co/pDMsdJUw2a #blender #3DCG #b3d pic.twitter.com/Vp0zqBhRiZ
— non (@nonnonkapibara) April 23, 2022