Bloggerでmodel-viewerを実装した話

モデリングしたメダロットのチアフルバニー

3Dビューしたかったので実装してみました

かわいい！

• modelviewerとはgoogleが提供するHTMLスクリプト(無料)
• glbデータのホスティングはGithubPagesを採用

1. bloggerのテーマをカスタマイズHTMLheadを編集
2. model-viewerのヘッダースクリプトを追加
3. githubでglbデータをgithubリポジトリに格納してリンク取得
4. リポジトリ名は「github.io」を最後に入れる
5. リポジトリをpublicへ変更
6. 投稿ページに表示スクリプトを実装してプレビュー

githubPagesの設定に苦労しました

参考にしたページ

<model-viewer> を使用した拡張現実  |  ARCore  |  Google for Developers

GitHub Pages サイトを作成する - GitHub ドキュメント

チアフルバニーかわいい

ショート動画もあるよ