WebVRでWebサイトを三次元で表現してみる！

この記事は難しいってより
とても楽しい記事なので気軽に読んでくださいーー！

## WebVRって面白いよね！！
最近話題の、VR。
それがWeb上でできるんです！！！

### 投稿してきたWebVRについての記事
ちょっと前からWebVRを知って、qiitaで共有してます。

[WebVR技術でWebサイトを三次元化する準備 その１](https://qiita.com/haruan2394/items/16cdd54e15d1402106d9)

[[WebVR]A-Frameで注視点カーソルを作る方法](https://qiita.com/haruan2394/items/80f840a83dd1a0a5240d)

#WebVRとは
Webブラウザ上でVRを使える技術のこと。
>
WebVR とは、ウェブブラウザ上で VR 体験を提供することです。狭義には、ウェブブラウザ上で 3D グラフィクスを表現する技術である WebGL をつかって、VR 体験を提供する技術を指します。
残念なことに、WebGL を直接利用して 3D グラフィクスを作るには、シェーダーやポリゴンといった 3D グラフィクスに特有の技法を学ぶ必要があります。そのため、WebGL を直接扱うのではなく ThreeJS をはじめとする WebGL の記述を楽にしてくれる Javascript ライブラリを用いて作られることが多いです。
[WebVR はじめよう](https://qiita.com/tushuhei/items/2509e7e23172ec402110)から引用

## WebVRのメリット
ブラウザでＶＲコンテンツを見ることができるので、
**インストールが不要**。
見たいときにすぐ見れる。

## WebVRのデメリット
Unityで作ったような高度なコンテンツはまだできない。
比べると動作が重い。

#WebVRを体験
[サンプル　http://cardboardclub.jp/study/160511/](http://cardboardclub.jp/study/160511/)
<img width="956" alt="スクリーンショット 2017-11-12 23.45.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/188304/319ceff8-5dd6-dbfb-ce45-3da216408fdc.png">
こんな感じです。スマホをハコスコなどにいれれば,VRっぽくなります。

#WebVRを使うには
今現在、簡単にできる方法は２つあります。

- Three.jsを使う
- A-Frameを使う

## Three.jsを使う
 JSで3Dオブジェクトをかけるライブラリ。
カスタマイズさせることでWebVRにすることが可能。
[公式サイトはこちら](https://threejs.org/)
## A-Frameを使う
Mozillaが作ったWebVR構築ライブラリ。なんと**HTMLでWebVRを作れる**。これはすごい。
しかも、JSで色々なことがかけます。
[公式サイトはこちら](https://aframe.io/)


# WebVRでWebサイトを三次元で表現してみる！
A-Frameの方がドキュメントが充実してるし、書きやすいので、A-Frameで書きます。
# A-Frameの入門
**WebVRを開発するときはfirefoxかchromeがおすすめです。**
くわしい入門は[こちら](https://qiita.com/haruan2394/items/16cdd54e15d1402106d9)

##A-Frameの導入

``` html:index.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
  </a-scene>
  </body>
</html>
```

scene（シーン）とは、三次元の空間のことです。
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.8">
      <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>
```
これでアニメーションのあるカーソルが作れました。
jsで、カーソルに乗った時の処理をかけます。

``` html:index.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.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.8">
      <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 color="red" depth="3" height="3" width="3" position="0 -1 -6"></a-box>
    <a-sky color="#87ceeb"></a-sky>
  </a-scene>
  <script src="/create-cursor/script.js"></script>
  </body>
</html>

```

```js:script.js
  var boxEl = document.querySelector('a-box');
  // カーソルがぶつかったら拡大
  boxEl.addEventListener('mouseenter', function () {
    boxEl.setAttribute('width', 10);
    console.log("mouseenter");
  });

  // カーソルが離れたら元にもどす
  boxEl.addEventListener('mouseleave', function () {
    boxEl.setAttribute('width', 3);
    console.log("mouseleave");
  });

```
このようにすると、ボックスがカーソルに触れた時にボックスが大きくなります。
サンプル
[https://anharu2394.github.io/web-site-vr/create-cursor/](https://anharu2394.github.io/web-site-vr/create-cursor/)


## リストを三次元で表現
例えば

- Home
- About
- Service
- Contact

のようなリストがあった時。

これをWebVRで表現すると、、、、、、、


``` html:index.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
<a-text id="home" value="HOME" align="center" position="-4 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
<a-text id="about" value="ABOUT" align="center" position="-1.5 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
<a-text id="service" value="SERVICE" align="center" position="1.5 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
<a-text id="contact" value="CONTACT" align="center" position="4 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
              position="0 0 -2"
              geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
              material="color: #acacac; shader: flat; opacity: 0.8">
      <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-sky color="#87ceeb"></a-sky>
  </a-scene>
  <script src="./script.js"></script>
  </body>
</html>


```

```js:script.js

  var home = document.querySelector('#home');
  var about = document.querySelector('#about');
  var service = document.querySelector('#service');
  var contact = document.querySelector('#contact');


  home.addEventListener('click', function () {
    location.href = "/web-site-vr/web-site/";
  });

  about.addEventListener('click', function () {
    location.href = "/web-site-vr/web-site/about.html";
  });

  service.addEventListener('click', function () {
    location.href = "/web-site-vr/web-site/service.html";
  });

  contact.addEventListener('click', function () {
    location.href = "/web-site-vr/web-site/contact.html";
  });

```

```html:about.html

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
  <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-text id="about_now" value="ABOUT" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
              position="0 0 -2"
              geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
              material="color: #acacac; shader: flat; opacity: 0.8">
      <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-sky color="#87ceeb"></a-sky>
  </a-scene>
  <script src="./script.js"></script>
  </body>
</html>


```

```html:service.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
<a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text>

<a-text id="service_now" value="SERVICE" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
              position="0 0 -2"
              geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
              material="color: #acacac; shader: flat; opacity: 0.8">
      <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-sky color="#87ceeb"></a-sky>
  </a-scene>
  <script src="./script.js"></script>
  </body>
</html>

```

```html:contact.html
<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  </head>
  <body>
  <a-scene>
  <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-text id="contact_now" value="CONTACT" align="center" position="0 0 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
  <a-entity camera look-controls wasd-controls>
    <a-entity cursor="fuse: true;"
              position="0 0 -2"
              geometry="primitive: ring; radiusInner: 0.1; radiusOuter: 0.15;"
              material="color: #acacac; shader: flat; opacity: 0.8">
      <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-sky color="#87ceeb"></a-sky>
  </a-scene>
  <script src="./script.js"></script>
  </body>
</html>

```

<img width="1275" alt="スクリーンショット 2017-12-15 23.38.01.png" src="https://qiita-image-store.s3.amazonaws.com/0/188304/e494d879-d483-8626-be7e-ece5a6a4d868.png">
＊ブラウザによって若干、背景の色が異なります。HOME,ABOUT,SERVICE,CONTACTのパネルは、色を指定してないので、ランダムです。

プレビューは[こちら](https://anharu2394.github.io/web-site-vr/web-site/)

リンクに飛ぶと、、、、、、
<img width="1260" alt="スクリーンショット 2017-12-15 23.40.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/188304/8bebffa4-c79e-f2cc-1d36-a8fc687a1142.png">

こんな感じです

プレビューは[こちら](https://anharu2394.github.io/web-site-vr/web-site/about.html)

### A-Frameのテキストの表示


```
  <a-text id="home" value="HOME" align="center" position="0 1.5 -4" color="white" geometry="primitive:plane; width: 2"></a-text>
```

a-textタグは文字を表示できるタグですが、geometry属性をつけることで、３Dのものの上に文字を表示することができ、長方形、球、平面などが選べます。
この場合は、『plane』で平面です。色を選ばねければランダムになります。
a-textタグのalign="center"にすることで中央寄せができます。CSSみたいで面白いですね！！
### A-Frameのリンクの実装
jsで実装しています。

```
  var home = document.querySelector('#home');
  home.addEventListener('click', function () {
    location.href = "/web-site-vr/web-site/";
  });
```
リンクの実装はいたって簡単です。
idがhomeとつけてあるa-textタグがクリックされた時に、
location.hrefでリンク先を指定してるだけです。

#　まとめ
WebVRはとても奥が深くて面白いです！！
基本的なところはWebの開発のように、CSSをいじってるようなのでとても面白いですね！！
ぜひ、WebVR開発をしてみてください。