A-frameでAR名刺を作ろう
実現を最優先にした記事構成にしています。
細かい内容は参考記事から参照してください。
A-Frameとは
Web上でVR・ARが実現できるJavascriptのライブラリ。
HTMLベースで書けるため、比較的気軽に扱えて便利。
読み込み
<head>
<!-- A-Frame本体 -->
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<!-- AR.js -->
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.2/aframe/build/aframe-ar.js"></script>
<!-- A-Frame内でリンクをつけるのに必要 -->
<script src="https://rawgit.com/gasolin/aframe-href-component/master/dist/aframe-href-component.min.js"></script>
</head>
3D空間にする
- a-scene: body直下に
<a-scene>タグでくくる - a-marker: マーカー指定のタグ
デフォルトで良い場合はこちらのタグにする<a-marker preset="hiro">
カスタムマーカー作り方は下記に記載 - a-entity: エンティティー要素
<a-scene embedded arjs="debugUIEnabled:false;">
<a-marker type='pattern' url='./marker/pattern-profile.patt'>
<a-entity
link="href: https://dais-official-site.web.app/; title: Official Site;"
position="0 .5 0"
></a-entity>
</a-marker>
</a-scene>
カスタムマーカージェネレーターHow To Use
- UPROADボタンから好きな画像アップ
- DOWNROAD IMAGEからマーカー画像をダウンロードしておく（アプリでかざす対象になります）
- DOWNROAD MARKERでダウンロードしたファイル名で指定する
url='./marker/<fileName>.patt'
※url指定しているのでローカルにデータを置く必要はありません。
カメラ指定
<a-entity camera look-controls wasd-controls>
<a-entity cursor="fuse: true;"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: blue; shader: flat">
<a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>
全体
<!DOCTYPE html>
<head>
<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>
<script src="https://rawgit.com/gasolin/aframe-href-component/master/dist/aframe-href-component.min.js"></script>
</head>
<body style='margin: 0; overflow: hidden;'>
<a-scene embedded arjs="debugUIEnabled:false;">
<a-marker type='pattern' url='./marker/pattern-profile.patt'>
<a-entity
link="href: https://dais-official-site.web.app/; title: Official Site;"
position="0 .5 0"
></a-entity>
</a-marker>
<a-marker type='pattern' url='./marker/pattern-tw.patt'>
<a-entity
link="href: https://twitter.com/dai_designing; title: Twitter;"
position="0 .5 0"
></a-entity>
</a-marker>
<a-marker type='pattern' url='./marker/pattern-fb.patt'>
<a-entity
link="href: https://www.facebook.com/daisuke.mori.374; title: Facebook;"
position="0 .5 0"
></a-entity>
</a-marker>
<a-marker type='pattern' url='./marker/pattern-qiita.patt'>
<a-entity
link="href: https://qiita.com/dai_designing; title: Qiita;"
position="0 .5 0"
></a-entity>
</a-marker>
<a-marker type='pattern' url='./marker/pattern-git.patt'>
<a-entity
link="href: https://github.com/dai-570415; title: Git Hub;"
position="0 .5 0"
></a-entity>
</a-marker>
<a-entity camera look-controls wasd-controls>
<a-entity cursor="fuse: true;"
position="0 0 -1"
geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
material="color: blue; shader: flat">
<a-animation begin="click" easing="ease-in" attribute="scale" dur="150"
fill="forwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
<a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" dur="1500"
fill="backwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>
</a-entity>
<p>更新2020.10.7 18:20</p>
</a-scene>
</body>
</html>
ここまでできたらGithub PagesやFirebaseなどでデプロイすると動くのでやってみてください。