環境メモ
⭐️macOS Monterey
⭐️Blender3.1.0
↓↓完成内容
🖥️3Dモデル Web📲
— non (@nonnonkapibara) April 23, 2022
Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊
オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍
↓↓作業メモhttps://t.co/pDMsdJUw2a#blender #3DCG #b3d pic.twitter.com/Vp0zqBhRiZ
↓↓こちらから実際に触る事ができます。
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を定義します。
<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（自動回転）
モデルの自動回転を有効にします。
<!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🌟
— non (@nonnonkapibara) April 18, 2022
Blenderで💕オムライス💕作ってみたよぉ😍
このオムライスでいろいろ遊んでみるよぉ🤩
↓↓作り方⭐️ざっくり解説🐹https://t.co/Pia5NBmcPx#blender #blender3d #3DCG #b3d #オムライス pic.twitter.com/R2n9uyRYDp
🖥️3Dモデル Web📲
— non (@nonnonkapibara) April 23, 2022
Blenderで作った🌟3Dモデル🌟オムライス💕をWebブラウザに表示してみたよぉ😊
オムライスを🐹マウス🖱️or指👆で🔎拡大したり🖥️📲スマホでも、ぐりぐり回せるのは💖とっても楽しいなぁ😍
↓↓作業メモhttps://t.co/pDMsdJUw2a#blender #3DCG #b3d pic.twitter.com/Vp0zqBhRiZ