# 未完AR講座 #1 ![](https://i.imgur.com/ff9xYrv.png) ## 自己紹介・座学(25分) [スライド](https://docs.google.com/presentation/d/1K2jrvFiGHkC5o47vsK4Q7pNiTg0t2Pyvwd1Um78pOlI/edit?usp=sharing) ## webARを体験してみよう! (30分) ### 今回の技術の構成 - Model-viewer model-viewerは、Googleが開発するプロジェクトで、webでインタラクティブな3Dモデルを表示するComponentです。 この、Model-viewerを利用したコンテンツは、AndroidではSceneViewer、iOSではARQuickLookという機能を用いて表示されています。 [公式ドキュメント](https://modelviewer.dev/) - github pages github pagesは、github上のファイルを静的サイトとして簡単に公開できる機能です 今回はこれを使ってページを公開します ### modelの形式について AndroidとiOSでは、それぞれ表示できる3Dモデルの形式が異なります。 Android Androidの場合、glb / gltfファイルで書き出す必要があります。 iOS iOSの場合は少し厄介で usdz ファイルで書き出す必要があります。 アドオンを導入することで、blender等から直接書き出せるのですが、Textureが適用されなかったりするので、Apple公式が提供している Reality Converter を使用します。 [Reality Converter](https://developer.apple.com/augmented-reality/tools/) ## 実際に動かしてみよう [リポジトリ](https://github.com/yuhi-dosei/mikan-ar-sample) Androidの方はChrome / iOSの方はSafari で以下のURLにアクセス [https://yuhi-dosei.github.io/mikan-ar-sample/](https://yuhi-dosei.github.io/mikan-ar-sample/) 机の上など、明るい平面に向けて端末をかざして、任意の場所をタップするとモデルが出てきます ![](https://i.imgur.com/iBTXyue.jpg) ## github pagesにデプロイしてみよう! 次回以降の練習として、サンプルプロジェクトをforkしてgithub pagesにデプロイ(展開)してみましょう! 1. githubからfork(自分のリポジトリとしてコピーすること) ![](https://i.imgur.com/3Fae4e2.png) forkボタンを押すと自分のアカウントにコピーされます ![](https://i.imgur.com/C688q7s.png) 2. github pagesにデプロイ [手順](https://docs.github.com/ja/pages/getting-started-with-github-pages/creating-a-github-pages-site) Settingsから Pagesを選択 ![](https://i.imgur.com/ZE6DMYm.png) Sourceで masterを選択 ![](https://i.imgur.com/EcxpPVT.png) Saveを押す ![](https://i.imgur.com/MYm8U7b.png) 3. PCで発行されたURLにアクセス ![](https://i.imgur.com/OeNvJ7G.png) 3Dモデルが表示されていればOKです! ## 次回予告 ![](https://i.imgur.com/chOmx0N.jpg) 次回はblenderを使ってモデリングをします! [こちら](https://www.blender.org/download/releases/3-0/)からblenderをダウンロードしておいて下さい! 2回目の申し込みはこちらです! [Connpassページ](https://mikan-study.connpass.com/event/235621/)