（初心者向け）3DモデルのAR体験サイトを作ってみる

読んでほしい人

3Dモデルを使ったARサイトを作成したい方
自作のサイトを公開してみたい方
githubを触ってみたい方

前提知識不要で、可能な限り簡単な手順でWebサイトを公開させることを目的としています。githubの使い方などメジャーではない方法を記載しておりますが、ご容赦ください。

サンプルページ

※AR機能はスマホのみ対応です。(Safari、Firefoxは非推奨です)

はじめに：アクスタモデルの修正

申し訳ございません。前回作った3Dモデルをサイトで使うにあたり、いくつか修正点があったので対応します。

アクスタではない自前のモデルを使用する方は、「サイトで使う3Dモデルの用意」までスキップしてください。

前回は「シェーダーミックス」という機能を使って、モデルの片方の面の裏表に別々の画像を設定していました。

しかし、サイトで使用する"glb"というファイル形式で出力する際に、このシェーダーミックスが適応されないようでした。(解決策をご存知の方おりましたら、ご教授ください🙇)

そのため今回は、片方の面を2重にして、それぞれの面に画像を設定する変更を行います。

(失敗しても良いように、前回のBlenderファイルをコピーして編集しても良いかもしれません。)

新規面の作成

編集モードにして、画像が貼ってある後ろの面を選択します。
「面」>「面を押し出し」で少し内側に押し出します。
押し出し後、後ろは面の無い枠だけの状態になります。
続けて編集モードで、画像のように面の無い枠の頂点を全て選択します。
「頂点」>「頂点から新規面作成」で新しい面を作成します。

面の向きを修正

ビューポートオーバーレイから「面の向き」にチェックを入れます。
先程作成した面のみ赤くなっていると思うので、面を選択した状態で「メッシュ」>「ノーマル」>「反転」で面の向きを切り替えます。
画像のように、外から見た時の面は全て青く、押し出した中間の面は、正面から見て青くなっていれば成功です。

新規面のUV展開

「UV Editing」に移動して、右の画面で新規作成した外側の面を選択し、左の画面で"後ろからの見た目に設定していた"画像を選択します。
「UV」>「スマートUV投影」を実行します。
左の画面で、スケールや移動を駆使して頂点を画像に合わせます。

マテリアルの修正

「Shading」に移動して、赤丸で囲んだノードを右クリック > 削除します。
画像のようなノードとビューポートの設定にします。
+でマテリアルを新規追加します。
画像のようなノードを設定して、一番外側の面を選択した状態で「割り当て」を選択します。
ビューポートの設定も画像のように変更します。

面の移動

「Layout」に移動して、中間の面を選択します。
中間の面を外側の面を越えない程度のギリギリまで移動させます。

以上で修正は完了です。ありがとうございました。

サイトで使う3Dモデルの用意

3DモデルのglbファイルをBlenderでエクスポートします。

目のマークで、出力したいモデル(ボディーと台座)のみ可視状態にします。
ファイル > エクスポート > glTF 2.0 (.glb/.gltf)を選択します。
内容 > 可視オブジェクトにチェックを入れて、エクスポートします。
「glb viewer」等で検索すると、glbファイルを読み込んで表示できるサイトがいくつかあるので、そこで正しくエクスポート出来たのかチェック出来ます。

サイトの準備

htmlファイルを用意します。

macだとターミナル、windowsだとコマンドプロンプトを開きます。
「cd」と入力した後に、htmlファイルを作成したいフォルダをドラック&ドロップして、Enter。
「touch ./index.html」と入力してEnter
フォルダの中にindex.htmlファイルが作成されていると思います。
index.htmlをテキストエディタ等で開きます。
リンク先のコードをコピペします。(コードブロック使えなかった...)
3行目の<title>~~</title>の箇所で、サイトのタイトルに変更します。
6行目の<meta name="description" content="~~" />の箇所で、サイトの概要を変更します。
48行目のsrc="./zunda.glb"の箇所を用意したglbファイル名に変更します。
49行目のalt="zunda_acrylic_stand"の箇所は、モデルが表示されなかった場合に表示される代替文字です。本来何が表示されるはずだったのか分かるような説明文に変更します。
56~58行目の<footer>の文言は、ページ下部に表示されます。こちらも必要に応じて、適切な文言に変更してください。

サイトを公開

今回はgithub pagesを使用します。

githubのアカウントを作成します。アカウント作成方法は「github アカウント作り方」等で調べるとたくさん出てくるので、ここでは割愛します。
「new」(最初はcreate repositoryかも？)で、新しいリポジトリを作成します。(リポジトリとはgithub上の用語で、1つのサイトやアプリ等を作る上で、用いたファイルを全てまとめたフォルダみたいなイメージです)
お好きなRepository nameを入力して、「Create repository」をクリックします。※公開設定は、特に理由がなければ「Public」にしてください。(「Private」の場合はサイト公開時に有料会員である必要があるため)
赤丸の「uploading an existing file」をクリックします。
作成したindex.htmlファイルとglbファイルをドラック&ドロップして、「Commit changes」の箇所は、今から行う変更の説明みたいなものなので、お好きなタイトルと概要を入力して、「Commit changes」をクリックします。
上部の「Setting」> 「Pages」に移動します。
「Branch」で「main」を選択します。
「Save」をクリックします。
しばらく(1分くらい)してリロードすると、「visit site」の表示が追加され、クリックすると公開されたサイトにアクセスすることができます。
既にウェブ上に公開されているので、URL(ex. https://higuma-dayo.github.io/zunda_acrylic_stand/)で、不特定多数の方に見ていただくことが可能です。