MyFirstRails
AR.jsでのAR機能の組み込み！
概要
Railsにこれから初めて触れる方を対象にしたチュートリアルです
AR.jsを使用してAR機能を組み込むチュートリアルです
チュートリアル
Railsのひな型を作る
まず、rails newを実行し、Railsアプリのひな型を作成します
rails new arjs
次に、作成したRailsアプリのディレクトリへと移動します
cd arjs
SQLite3のバージョンを修正
先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを修正します
gem 'sqlite3', '1.3.13'
その後、bundle installを実行します
bundle install
これでOKです！
Viewの作成
rails g controllerコマンドを使用して、Viewを作成します
rails g controller web index
その後、config/routes.rbを編集します
Rails.application.routes.draw do
root 'web#index'
get 'web/index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
Viewの作成はこれでOKです！
AR.jsの導入
それではAR.jsを導入していきたいと思います
app/views/web/index.htmlを以下のように変更します
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-box position='0 0.5 0' material='color: black;'></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
あとは、rails sを実行し、localhost:3000にアクセスしてください
画面全体がカメラとして動作していると思います 最後に、以下の画像を読み込んでみてください
黒い四角が表示されていればOKです！