htmlを書くだけ！マーカーWebAR
2019-10-29
2019-10-29
マーカーを使ったARにしてみよう
さて、前回の続きです。今回はマーカー上に前回作成した地球を表示してみたいと思います。
前回のソースコードを下記のようにします。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded>
<a-sphere
animation="property: rotation; from: 0 0 0; to: 0 360 0; dur:10000; loop: true; easing: linear;"
position="0 1.25 -5"
radius="1.25"
src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fearth.jpg?v=1571897568427"
shadow
></a-sphere>
<a-sky src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fspace.jpg?v=1571898513741"></a-sky>
</a-scene>
</body>
</html>
```
追加したのは
```
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
```
と、a-sceneのタグの中がembeddedに変わっただけです。
これで画面を表示してみると、
カメラを通して地球がずっと写っている状態になるかと思います。
マーカーにかざしたときだけ表示
次にマーカーにかざしたときのみ、表示されるように変更します。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-sphere
animation="property: rotation; from: 0 0 0; to: 0 360 0; dur:10000; loop: true; easing: linear;"
position="0 1.25 -5"
radius="1.25"
src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fearth.jpg?v=1571897568427"
shadow
></a-sphere>
</a-marker>
<a-sky src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fspace.jpg?v=1571898513741"></a-sky>
</a-scene>
</body>
</html>
```
マーカー上に表示したいものをa-markerで囲みます。
今回は「hiro」というテンプレートのマーカーを使用しました。
また、a-sceneにarjsを追加しました。
これで、hiroというマーカーにかざしたときのみ
表示されるようになったはずです。
オブジェクトの位置、その他を調整する
無事表示できたと思いますが、下の画像のように場所がずれているかと思います。
また、変な文字も表示されていて邪魔くさいですね。
位置の調整と余計な文言をとっぱらいたいと思います。
オブジェクト位置の修正
何故場所がずれているかというと、a-sphereの中を見てみましょう```
<a-sphere
animation="property: rotation; from: 0 0 0; to: 0 360 0; dur:10000; loop: true; easing: linear;"
position="0 1.25 -5"
radius="1.25"
src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fearth.jpg?v=1571897568427"
shadow
></a-sphere>
```
この部分のpositionが0 1.25 -5となっていることが問題です。
原点はマーカーの中心となります。
こいつを0 2 0と変更してみましょう。
これで真ん中、マーカーより上に2という部分に出てくれるはず・・・
まだずれてました。
なぜか。
これは「カメラの位置が原点にある」ことを前提としているからです。
でも、実際は原点にありません。
なので、カメラはここだよーを明示的に表してあげます。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, WebVR! • A-Frame</title>
<meta name="description" content="Hello, WebVR! • A-Frame">
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
</head>
<body>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-sphere
animation="property: rotation; from: 0 0 0; to: 0 360 0; dur:10000; loop: true; easing: linear;"
position="0 2 0"
radius="1.25"
src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fearth.jpg?v=1571897568427"
shadow
></a-sphere>
</a-marker>
<a-sky src="https://cdn.glitch.com/f1432045-b246-46c1-a562-f07b21784e53%2Fspace.jpg?v=1571898513741"></a-sky>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>
```
a-entyty cameraで原点がここだよ、と指定してあげます。
これで解決しました。
デバグを消去する
最後にデバグを消去します。```
<a-scene embedded arjs="debugUIEnabled: false;">
```
a-sceneのarjsにデバグ表示をしない、という文言を追加するだけです。
これで完成です。
思ったより簡単だったでしょう。
まだまだ色々なことができるので、
興味がある方は公式ページを色々見てみてください！