はじめまして！新人社員の累（るい）です。
社会人になって一日中ディスプレイを見て過ごしているせいで疲れ目に悩んでます。
目に良い食べ物を検索してみると、ブルーベリーが人気ですが、有効成分のアントシアニンが4倍も含まれている紅いもがお勧めらしいですよ。
私は甘党なので、沖縄の紅芋タルトをおすすめします。
ひとつ食べると、ついつい何個も食べてしまう中毒性があるんですよね。アレ。
ただ、いくら食べてもブルーベリーのように目に良い感じはしませんが…
疲れ目に悩んでいる方は、スーパーで見つけたらぜひゲットしてください。
目次
シードライブ社内のVRラボ
さて、このブログでは、社内ラボで学んだVR技術の一部をアウトプットしたいと思います。
まずはじめに、社内ラボでVRを学ぼうと思ったきっかけですが、社内でVRのチュートリアルを体験して、あまりのリアルさにびっくりしたからです！
（シードライブには備品としてVRゴーグルが置いてあります。）
もう時代はここまで来ているんですね～。
出社しないでずっと家でVRを使って仕事する日もすぐそこです。
正直、ずっと家に引きこもっていれば、ウイルスだって怖くないです。
これからの世の中はウィズコロナ、でも、ウィズアウトミーでいきましょう。
話を戻しますと、社内ラボでは様々なVR技術を勉強会形式で学んでいます。
まずは、一番とっつきやすいところで、既存のWebサイトにVRを組み込めるWebVR技術「a-frame」を
学びました。
「a-frame」とは？基本のコードを実際のソースを使って解説！
「a-frame」はJavaScriptを使ったVRライブラリで、HTMLで作成しているサイトへ組み込み可能なVRです。
少々難解なJavaScriptをHTMLに埋め込むことで、VRコンテンツを作ることが出来るようになります。
では、実際に作ったものをご紹介しますね！
「a-frame」は以下のサイトからライブラリに関する情報やソースコードの入手が可能です。
サンプルもたくさんあるので、必読です。英語ですが…
以下は本家から持ってきた「Hello WebVR」というコードにスクリプトに関するコメントを入れたものです。
<html>
<head>
<!--a-frameを読み込みます-->
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<!-- シーンの追加 -->
<a-scene>
<!--ボックスオブジェクトの表示-->
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<!--球体オブジェクトの表示-->
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<!--円柱オブジェクトの表示-->
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<!--平面の表示-->
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<!--背景の設定-->
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>簡単に物体を配置可能です。
ただ、position（位置）やrotation（向き）での調整をするのが結構大変ですね。
ブラウザでの表示結果は以下になります。
ヘッドセットのブラウザで画像右下の「VR」をクリックすると、このVR世界に入れます。
360°画像におじさんをたくさん配置してみる
続いて、360°画像とフリーの3Dデータを読み込んで、仮想世界と3Dオブジェクトのミックストゥギャザーな空間を作ってみましょう！
まず、3Dデータを読み込むには<a-assets>タグを使います。
読み込み可能な3Dオブジェクトデータは、この記事を書いている時点で obj もしくは glTF のようですね。
今回は3Dデータを販売するサイトから無料の人物データをダウンロードしてきました。
この人物データ「お腹の立派なおじさん」を弊社のオフィスに没入させてみました。せっかくなので、5体配置。
それぞれ位置と角度を調整して、最後に360°の画像を<a-sky>タグにセットしてオフィスの中を再現。
はい、出来上がり！ジャン！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebVRの練習1</title>
<meta name="description" content="WebVRの練習1">
<script src="./aframe-master/dist/aframe-master.js"></script>
</head>
<body>
<!--3D画像の読み込み-->
<a-assets>
<a-asset-item id="full_body-obj" src="full_body.obj"></a-asset-item>
<a-asset-item id="full_body-mtl" src="full_body.mtl"></a-asset-item>
</a-assets>
<a-scene>
<!--お腹の立派なおじさん1を配置-->
<a-obj-model src="#full_body-obj" mtl="#full_body-mtl" scale="0.04 0.04 0.04" position="45 -30 -30" rotation="-10 -80 0"></a-obj-model>
<!--お腹の立派なおじさん2を配置-->
<a-obj-model src="#full_body-obj" mtl="#full_body-mtl" scale="0.04 0.04 0.04" position="-45 -30 -30" rotation="-10 50 0"></a-obj-model>
<!--お腹の立派なおじさん3を配置-->
<a-obj-model src="#full_body-obj" mtl="#full_body-mtl" scale="0.04 0.04 0.04" position="-20 -30 40" rotation="-10 100 0"></a-obj-model>
<!--お腹の立派なおじさん4を配置-->
<a-obj-model src="#full_body-obj" mtl="#full_body-mtl" scale="0.04 0.04 0.04" position="-10 -30 80" rotation="-10 150 0"></a-obj-model>
<!--お腹の立派なおじさん5を配置-->
<a-obj-model src="#full_body-obj" mtl="#full_body-mtl" scale="0.04 0.04 0.04" position="30 -30 50" rotation="-10 180 0"></a-obj-model>
<!--シードライブオフィスの360°画像をセット-->
<a-sky src="IMG_20210716_184142_00_001.jpg"></a-sky>
</a-scene>
</body>
</html>調子に乗って「お腹の立派なおじさん」を大量に配置したせいで、弊社のオフィスがカオスになっています。
こちらがヘッドセットで録画した動画でございます。
おわりに
実際に作ってみた感想ですが、WebVR「a-frame」はJavaScriptを使って簡単にWEBに組み込めて導入が楽ですね。
対応ブラウザも多いので、アイデアに富んだ表現方法さえ思いつけば、WEBサイトにどんどん導入されるようになると思いました。
それではまた次回！
