[WebVR]A-Frameで注視点カーソルを作る方法


# A-Frameでカーソルを作るよ！
## A-Frame入門と導入
[WebVR技術でWebサイトを三次元化する準備その１](https://qiita.com/haruan2394/items/16cdd54e15d1402106d9)
を参考にしてください。
## カーソルの作り方　
（その１）
ソースコードです。

``` html:index.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src = "https://aframe.io/releases/0.7.0/aframe.js"></script>
  </head>
  <body>
<a-scene>
  <a-box position="0 5 -5" rotation="0 45 45" scale="2 2 2" color="#EF2D5E">
    <a-animation attribute="position" to="0 -4 -5" direction="alternate" dur="3000"
      repeat="indefinite"></a-animation>
  </a-box>

  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
</a-scene>
<script type="text/javascript" src="/script.js"></script>
  </body>
</html>
```

```js:script.js
  var boxEl = document.querySelector('a-box');

  // カーソルがぶつかったら拡大
  boxEl.addEventListener('mouseenter', function () {
    boxEl.setAttribute('scale', {x: 5, y: 5, z: 5});
    console.log("mouseenter");
  });

  // カーソルが離れたら元にもどす
  boxEl.addEventListener('mouseleave', function () {
    boxEl.setAttribute('scale', {x: 2, y: 2, z: 2});
    console.log("mouseleave");
  });
```

javascriptを読み込むときは、**bodyの閉じタグの
前**にしましょう。そうしないと、エラーが出てしまいます。

```
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
```
a-cursorタグは通常a-cameraの入れ子にします。
プレビュー
![web_vr.gif](https://qiita-image-store.s3.amazonaws.com/0/188304/182ffbd6-e101-603c-7df6-8b22e74c27f4.gif)

## カーソルの作り方　
（その２）

``` html:index.rb
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src = "https://aframe.io/releases/0.7.0/aframe.js"></script>
    
  </head>
  <body>
<a-scene>
<a-entity camera look-controls wasd-controls>
<a-entity cursor="fuse: true;"
          position="0 0 -3"
          geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
          material="color: #acacac; shader: flat; opacity: 0.6">
  <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>
  <a-box position="0 0 -5" rotation="0 45 45" scale="2 2 2" color="#EF2D5E">

  </a-box>
</a-scene>
<script type="text/javascript" src="/script.js"></script>
  </body>
</html>

```

```js:script.js
          // Component to change to a sequential color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var lastIndex = -1;
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      lastIndex = (lastIndex + 1) % COLORS.length;
      this.setAttribute('material', 'color', COLORS[lastIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});
```
[A-frameのドキュメント](https://aframe.io/docs/0.7.0/components/cursor.html#sidebar)を参考にしました。
A-frameのドキュメントを真似しても、

```html
<a-entity camera >
```

を

```html
<a-entity camera look-controls wasd-controls>
```

にしないと、うまく動作しないので注意してください。
プレビュー
![web_vr_cursor.gif](https://qiita-image-store.s3.amazonaws.com/0/188304/d7d4d75b-0a02-8d8a-6fe1-f445e1d577fa.gif)
hoverした時に、カーソルの円が小さくなります。

[WebVRでWebサイトを3次元で表現してみる！](https://qiita.com/haruan2394/items/a2d54101377b96ba08f2)
も読んでみてください。
# まとめ
A-frameではhtmlを数行、jsを数行書くだけで、カーソルを実装することができます。
次はVR上のリンクを実装していきたいと思います。
##　参考文献
[https://aframe.io/docs/0.7.0/components/cursor.html#sidebar](https://aframe.io/docs/0.7.0/components/cursor.html#sidebar)
[https://aframe.io/docs/0.7.0/primitives/a-cursor.html#sidebar]
(https://aframe.io/docs/0.7.0/primitives/a-cursor.html#sidebar)