本記事では、3Dモデルそのものの作り方の説明や、AR.jsに初めて触る人のための解説はしていませんので、ご了承ください。
方法
0) モデル生成
Sculptrisという無料3Dスカルプトソフトウェアを使ってモデルを作っておきます。粘土をこねこねする要領で、めちゃくちゃ簡単に3Dモデルを作れるので、すごくおすすめです。
1) モデルのエクスポート
3Dモデルを作成したら、図の水色囲みのExportボタンをクリックして、objファイルをエクスポートします。
次に、マテリアルのエクスポートをします。
Show advanced toolsをクリックすると、
図のようなボタンが現れます。
一番左のSAVE TEXTMAPをクリックすると、png形式でマテリアルが保存されます。
2) mtlファイル生成
エクスポートすると、objファイルとpngファイルが生成されます。しかし、AR.js内でモデルのマテリアルを指定するには、mtlファイルが必要になるので、blenderという別の無料3Dモデリングソフトウェアを使う必要があります。こちらのリンクの、「3. Sculptrisからデータの書き出し」で、mtlファイルの生成方法が写真付きで詳しく説明されているので、参照してください。
3) AR.jsへのモデル組み込み
※モデルの組み込み方は、Mediumの記事を参考にしました。まず、本家サイトREADMEにある、"Augmented reality for the web in less than 10 lines of html"のコードをまるまるコピーします。
この中の、a-boxタグの部分がARで表示する物体を指定しているので、ここを自作3Dモデルを表示できるように書き換えます。
こんな感じになります。
自作のモデルでなくとも、既存の3Dモデルで、objファイルとmtlファイルが揃っていれば、同様の方法で組み込めますよ。
4) 完成
やったー！！
まとめ
自作モデルを自作ARに組み込めるって、嬉しいですね。
この記事が、SculptrisとAR.jsで頑張っている人の助けになれば幸いです。
