（model-viewer使用）blenderで作ったをモデルをbloggerに貼った覚書

肝心のモデルは消したのでない　前にnoteに書いたやつの移動です
コードとか一切分かってないので、マジで間違ってる可能性あり、ヤバいことになってたら教えてください

また放置すると思うのでリンク先の保証はない

▼これあれば動く

とりあえず一旦、全て投稿ページに直入れしています
WEBデザインテンプレートのカスタマイズでもHTMLをカスタムできるみたいなんですけど、ぶっ壊しそうなので……
しばらく触ってない間にバージョンが上がっていた

  
<head>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.3.1/model-viewer.min.js"></script>
</head>
<body>
　<model-viewer camera-controls="" src="（任意のglbファイルURL）"></model-viewer>
</body>

alt: モデルの説明文（アクセシビリティのため重要）
src: 3Dモデルファイルのパス
ar: AR表示機能の有効化
environment-image: 環境マップの設定
poster: 読み込み中に表示される画像
shadow-intensity: 影の強さ
camera-controls: カメラ操作の有効化

モナカプレス『Google Model Viewerの最新バージョンv4 の紹介』

とりあえず必須なのは
・src（3Dモデルのリンク）
・camera-controls（カメラぐるぐるするやつ）
ぐらい　ライトは出力されないので己で指定するっぽい

blenderからglb形式でエクスポート→アップロード

〈オブジェクトモード〉レイヤータブから書き出したいオブジェクトを選択→エクスポート→glTF 2.0 (.glb/.gltf)
エクスポート画面
デフォルト状態から
【内容】
☑️選択したオブジェクト
【データ：メッシュ】
適用してないモディファイアーがある場合→☑️モディファイアー
色にサーフェス入れてる場合→☑️属性
【圧縮】
☑️

・なるべくモディファイアーは適用させた方がいい
・属性ってもっと他のとこにもいるっぽい　なんか知らんけどおかしくなったらとりあえずチェック入れとく
・グアアアアガラスのやつ透過されねぇ　なぜ？

glbファイルをどっかにアップロード（Dropboxにした）

model-viewer貼り付け

head重複してるけどいいのかなこれ
とりあえずbloggerの記事（ページ）追加、htmlビューでスクリプトの追加とモデルビューワーの読み込み（読みやすいように改行してます）

  
<head>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.3.1/model-viewer.min.js"></script>
</head>
<body>
<model-viewer>
   camera-controls
   src="（ここにglbファイルのリンク）"></model-viewer>
</body>

Dropboxにアップしたやつのリンクをコピー
リンクをmodel-viewerのとこに貼り付けて、直リンクに手動で直す（wwwをdlに変更）よく分からないけどいけた

光の設定

プレーンな状態だとのっぺりするので
environment-imageを指定してオブジェクトにあたる光を追加
これでだいぶ見え方変わるんだけど、どれがいいのか分からない
こちらのサイト（↓）からダウンロード
https://polyhaven.com/ja HDR形式でダウンロード
なんか説明に載ってたコンバーター（↓）で変換　JPEG形式で保存
https://gainmap-creator.monogrid.com/ja//

色々足してこんな感じ

  
<head>
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.3.1/model-viewer.min.js"></script>
</head>
<body>
　<model-viewer 
   camera-controls="" /*ユーザー操作の有効化*/
   interaction-prompt="none" /*インタラクションプロンプトの無効化*/
   class="（任意のクラス名）" /*表示サイズ等変更*/
   environment-image="（任意のhdr、jpgファイル）" /*モデルに当たるライトを指定*/
   src="（任意のglbファイル）" /*モデル*/
</model-viewer>
</body>

style指定

そのままだと見にくいので色々指定
ブログのテンプレートとの兼ね合いもあるけど自分用にとりあえず……
class名を付けて（model1）CSS変更　モデルを羅列するだけのページ

  
<style>
model-viewer.（任意のクラス名）{
   text-align:left;/* スクロールしやすいよう左寄せ*/
   width:95%; /*幅を指定*/
   height:550px; /*高さを指定*/
   background:#eeeeee; /*背景色にグレーを指定*/
   }
</style>

完成!
あとはスマホ版のpaddingを無効にしたりしてギリギリにするなどしている

属性をGoogle翻訳したものと、簡単なライティング等のテストを載せたページを作りました
誰かの参考になったらいいな
https://odayakanitoriaezu.blogspot.com/2026/01/blog-post_4.html

▼参考サイト
https://modelviewer.dev/(model-viewer)
https://press.monaca.io/atsushi/30565(Google Model Viewerの最新バージョンv4 の紹介)
https://modelviewer.dev/docs/index.html(model-viewer例)

とりあえずボックス

このブログを検索