Sculptrisの自作3DモデルをAR.jsに組み込む方法

備忘録として、自作の3DモデルをAR.jsに組み込む方法をまとめておきます。
本記事では、3Dモデルそのものの作り方の説明や、AR.jsに初めて触る人のための解説はしていませんので、ご了承ください。


方法

0) モデル生成

Sculptrisという無料3Dスカルプトソフトウェアを使ってモデルを作っておきます。
粘土をこねこねする要領で、めちゃくちゃ簡単に3Dモデルを作れるので、すごくおすすめです。

1) モデルのエクスポート

3Dモデルを作成したら、図の水色囲みのExportボタンをクリックして、objファイルをエクスポートします。
Sculptrisでの3Dモデルのエクスポート解説

次に、マテリアルのエクスポートをします。
Show advanced toolsをクリックすると、
Sculptrisでの3Dモデルのエクスポート解説

図のようなボタンが現れます。
Sculptrisでの3Dモデルのエクスポート解説

一番左の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で頑張っている人の助けになれば幸いです。