【3D Viewer】３DモデルのオムライスをWebブラウザに表示してみたよぉ

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

↓↓完成内容
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🖥️3Dモデル Web📲<br>Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊<br>オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍<br><br>↓↓作業メモ<a href="https://t.co/pDMsdJUw2a">https://t.co/pDMsdJUw2a</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/3DCG?src=hash&amp;ref_src=twsrc%5Etfw">#3DCG</a> <a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://t.co/Vp0zqBhRiZ">pic.twitter.com/Vp0zqBhRiZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1517956476811108352?ref_src=twsrc%5Etfw">April 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



![スクリーンショット 2022-04-24 2.08.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e0f4fc03-7788-6486-af19-7c2f68e7092e.png)

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

↓↓スマホでも動きます
![QR_nonomeletsara.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ebd5f998-ace9-2eab-22c0-2783d2579481.png)



# ３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を定義します。
```html: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
![スクリーンショット 2022-04-24 1.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/9877f46c-fb74-2bb3-8fcb-395ef75cbd5b.png)


・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（自動回転）
モデルの自動回転を有効にします。


```html: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


<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🌟Blender🌟<br>Blenderで💕オムライス💕作ってみたよぉ😍<br>このオムライスでいろいろ遊んでみるよぉ🤩<br><br>↓↓作り方⭐️ざっくり解説🐹<a href="https://t.co/Pia5NBmcPx">https://t.co/Pia5NBmcPx</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/blender3d?src=hash&amp;ref_src=twsrc%5Etfw">#blender3d</a> <a href="https://twitter.com/hashtag/3DCG?src=hash&amp;ref_src=twsrc%5Etfw">#3DCG</a> <a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://twitter.com/hashtag/%E3%82%AA%E3%83%A0%E3%83%A9%E3%82%A4%E3%82%B9?src=hash&amp;ref_src=twsrc%5Etfw">#オムライス</a> <a href="https://t.co/R2n9uyRYDp">pic.twitter.com/R2n9uyRYDp</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1516144538095550470?ref_src=twsrc%5Etfw">April 18, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🖥️3Dモデル Web📲<br>Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊<br>オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍<br><br>↓↓作業メモ<a href="https://t.co/pDMsdJUw2a">https://t.co/pDMsdJUw2a</a><a href="https://twitter.com/hashtag/blender?src=hash&amp;ref_src=twsrc%5Etfw">#blender</a> <a href="https://twitter.com/hashtag/3DCG?src=hash&amp;ref_src=twsrc%5Etfw">#3DCG</a> <a href="https://twitter.com/hashtag/b3d?src=hash&amp;ref_src=twsrc%5Etfw">#b3d</a> <a href="https://t.co/Vp0zqBhRiZ">pic.twitter.com/Vp0zqBhRiZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1517956476811108352?ref_src=twsrc%5Etfw">April 23, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>