Intro

今週、A-FRAMEという新しいツールを知らせました。
https://aframe.io/examples/showcase/helloworld/

自分がVRに対してなイメージは、
特別な有料アプリしか使えない技術でしたが、
普通のPCだけでもVRサイトを作れるのを初めて知りました。

企画

A-FRAMEを応用して、雪の世界を作りたいです。
最近は友人が、冬の時青森に行ってみたい話がありました。
ターゲトスポットは青森県立美術館であり奈良美智の作品ー犬です。

雪を降る時に、犬の頭の上はマカロンみたいな雪が積みます。
しかし、実際に雪が降る時は12月末くらいですから、行けないかもしれません。

雪世界にあ憧れるため、VR雪世界を作成！

A-FRAMEについての紹介

A-FRAMEはHTMLに基づき、特にダウンロードいらないフレームワークです。
Webサイトで、多くのテンプレートをのっています。
また、Web VR以外、3Dシーンまたは、応答できるゲームも作れられます。

↑moonriderというサンプルは、自分が一番好きなのです。
https://aframe.io/examples/showcase/moonrider/

成果物（半製品）の紹介

ゲームのテンプレートがカッコイイと思いましたが、
自分のレベルを含めて考え、
最初にはVRの練習プロジェクトから作りたいと思いました。

現時点の成品は以下となります：

See the Pen colorful pops by 3luulm (@3luulm) on CodePen.

↑codepen　プロジェクト

真ん中は1つ赤いcursor丸があります。
cursorをそれぞれのコンポーネントの上に移動しますと、色のかわり、挨拶な文字の現す動きがあります。
また、JavaScriptを応用し、コンポーネントの自動色変更ができています。
さらに、mouseenter と mouseleaveによるeventを設定でき、コンポーネントの色は動きによる変わります。

Netlifyで公開

https://melodic-sopapillas-d3ef32.netlify.app/

難しいところ

1. VRバックグラウンドの探しは意外と難しいで

普通にbackgroundで検索しましたら、主にこういう感じの写真が見つけられます↓

VRではない場合、綺麗に使えます。
しかし、VRであれば、こういうふうになりました↓
https://codepen.io/3luulm/pen/OJEgxpb
全然綺麗ではありません。
こういう遠いところから道を延長してきたバックグラウンドを使えば、
より似合うと思いまう↓
https://cdn.aframe.io/360-image-gallery-boilerplate/img/sechelt.jpg

2.動画のembedができていない

写真のassetができていましたが、動画でやってみましたら真っ黒になりました。
HTMLのiframe方法とA-FRAMEのA-VIDEO、両方とも失敗しました。
今まではまだこの問題を解決できていません。

方法1

<iframe width="560" height="315" src="動画URL" title="video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

方法2
<a-video src="#videoplayer" width="16" height="9" position="0 0 -20"></a-video>