AR や MR などの XR 分野に手を出してみたくて、調べていたら AR.js を見つけました。
以前の ml5.js や、フロントエンドの技術と IOT と組合わせることで、
何か面白いものが作れそうな気がしたので、試してみます。
数年前に Three.js を触っていたこともあったので、3D の描画に AR.js はとてもよさそうです。
今回の作成にあたって、いくつかの WEB サイトを参考にしています。
参考
- jeromeetienne/AR.js
- あの AR をブラウザで体験できる!「AR.js」であそんでみた
- JavaScript: AR.js で年賀状を作ってみる
- AR.js 導入メモ
- Three.js + AR.js + Tween.js で遊ぶ
その中でも A-Frame を使用せずに使っているサンプルは一つしか見当たらなくて、
正直丸パクリぽくて心苦しい部分があります。
ですが、webpack を絡めているものは見当たらなかったので、そのあたりで参考にしてもらえればうれしいです。
AR マーカーに立方体を表示するだけのシンプルな構成にしました。
それではソース他の解説です。