見出し画像

スマホで3DモデルをAR体験！GitHub Pagesで簡単ホスティング

yasusan

作成した3DモデルをスマホでAR体験できるようにする方法を紹介します。AR（拡張現実）は、一見すると難しく感じるかもしれませんが、実際は簡単な手順で実現できます。特にGitHub Pagesを使用すれば、ウェブサイトの公開も簡単です。

記事の全体の流れをmapifyで紹介

ステップ1: <model-viewer> のスクリプトを読み込む

まずは、<model-viewer>を使って3Dモデルを表示するためのスクリプトをHTMLファイルに追加します。このスクリプトを読み込むことで、ウェブページ上でモデルが表示可能になります。

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

ステップ2: <model-viewer>タグを使って3Dモデルを表示する

次に、<model-viewer>タグを使って、AR対応の3Dモデルを表示します。これで、スマホやブラウザ上で3Dモデルを操作したり、ARモードで楽しんだりできるようになります。

<model-viewer
    src="path/to/your/model.glb"
    ar
    ar-modes="webxr scene-viewer quick-look"
    camera-controls
    auto-rotate
    style="width: 100%; height: 100%;"
></model-viewer>

属性の説明:

  • src: あなたの3Dモデルのファイル（.glb形式）のパスを指定します。

  • ar: AR機能を有効にする属性です。これを指定することで、AR表示が可能になります。

  • ar-modes:

    • webxr: WebXR対応のブラウザでAR体験が可能です。

    • scene-viewer: Androidデバイスで、Googleの「Scene Viewer」が起動してARを体験できます。

    • quick-look: iOSデバイスで、Appleの「AR Quick Look」を使用してARを表示します。

  • camera-controls: ユーザーが3Dモデルをドラッグして回転させたり、ズームイン・アウトできるようにします。

  • auto-rotate: モデルが自動で回転し続けるようにする属性です。これにより、見る側が何も操作しなくても、モデルが常に動いています。

ステップ3: GitHubでリポジトリを作成しよう

次に、GitHubを使ってウェブサイトをホスティングします。まずは、GitHubで新しいリポジトリを作成して、ファイルを保存する場所を用意します。

手順:

  1. GitHubにログインし、右上の「＋」アイコンをクリックして「New repository」を選びます。

  2. リポジトリ名を入力し、Public（公開）を選択します。

  3. 「Create repository」ボタンをクリックして、新しいリポジトリを作成します。

リポジトリは、プロジェクトのファイルを管理する場所です。この中に、HTMLファイルと3Dモデルを保存します。

ステップ4: ファイルをアップロードしよう！

次に、HTMLファイルと3Dモデルを作成したリポジトリにアップロードします。

手順:

  1. 作成したリポジトリのページで、「uploading an existing file」をクリックします。

  2. HTMLファイルと3Dモデル（.glb形式）をドラッグアンドドロップしてアップロードします。

  3. 「Commit changes」をクリックして、ファイルをリポジトリに保存します。

これで、ファイルがインターネット上に公開できる状態になります

ステップ5: GitHub Pagesでウェブサイトを公開

ウェブサイトの公開になります。

手順:

  1. リポジトリの「Settings」タブをクリックします。

  2. 左側のメニューから「Pages」を選びます。

  3. Sourceセクションで「Deploy from a branch」を選択し、ブランチはmainを指定します。

  4. Folderは「/（root）」を選択して、「Save」ボタンをクリックします。

保存後、少し待つと「Your site is live at:」というリンクが表示されます。これが、公開されたウェブサイトのURLになります。

ステップ6: スマホでAR体験してみよう！

スマホのウェブブラウザで、公開されたURLにアクセスします。

  • Android: 「AR」ボタンをタップすると、GoogleのScene Viewerが起動してAR体験が始まります。

  • iOS: 「AR」ボタンをタップすると、AR Quick Lookが起動します。


sam cane

ウェブブラウザで表示できるAR技術の比較

今回使用した<model-viewer>をはじめ、ウェブブラウザで使えるAR技術を簡単に比較してみました。技術の選び方によって、実現できる体験や必要なスキルが異なります。

Three.jsは、非常に柔軟で複雑な3D表現が可能ですが、学習コストが高めです。コードを書くのが好きな人や、自由度の高いカスタマイズがしたい方におすすめです。

A-Frameは、Three.jsをベースにしたフレームワークで、3Dシーンをより簡単に構築できます。中規模のARやVR体験を作りたい場合に便利です。

AR.jsは、マーカー型ARに特化しており、比較的簡単にAR体験を実現できます。AR体験を気軽に試したい方にはぴったりです。

model-viewerは、学習コストが低く、シンプルな3Dモデルを表示するのに最適です。すぐにARを体験してみたい場合は、この技術を使うといいでしょう。

まとめ

以上が、3DモデルをスマホでAR表示するための手順と、いくつかのAR技術の比較です。GitHub Pagesを使えば、難しいことはなく、シンプルに自分の作品を世界に公開できます。

いいなと思ったら応援しよう！