環境メモ
⭐️macOS Monterey
⭐️Blender3.1.0

↓↓完成内容

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

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

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

↓↓スマホでも動きます

３Dモデルのオムライスの準備

３DモデルのオムライスあらかじめBlenderで作成しglb形式にエクスポートしました。

以下を参照

【Blender】オムライスを作ってみたよぉ
https://nonkapibara.hatenablog.com/entry/2022/04/19/032227

【Blender】マテリアルからノーマルマップを作成する
https://nonkapibara.hatenablog.com/entry/2022/04/24/014637

model-viewerを使って、3Dモデルをブラウザに表示しました。
model-viewerで表示できる3Dモデルはglb/glTFです。

model-viewerの使用方法

model-viewerの使用方法は、こちらのマニュアルに記載されています。
https://github.com/google/model-viewer/tree/master/packages/model-viewer

Webコンポーネントは、無料のCDNから直接使用することができます。
スクリプトでCDNを定義します。

index.html

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

style

・styleで画面に表示するサイズ、背景色を定義します。

model-viewerプロパティ

model-viewerで使用するプロパティの説明が、下記のサイトに記載されています。
https://klausw.github.io/model-viewer/index.html

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

・camera-controls（カメラコントロール）
ブラウザで３Dモデルをマウスやタッチによるコントロールを有効にする

・camera-orbit（カメラ軌道）
３Dモデルからの距離を制御できます。

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

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

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

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

・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="120deg 50deg 10m" 
      src="assets/models/omelet_sara.glb"
      poster="assets/loding.gif"
      alt="non omelet"
      shadow-intensity="1"
      auto-rotate>
    </model-viewer>
  </body>
</html>

続きは、こちら
【AR】Blenderで作った3DモデルオムライスをiPhoneとAndroidでAR表示してみたよぉ。
https://qiita.com/nonkapibara/items/d1792389bbdf6b342c50

🌟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