VRにはまりまして。
Penseur
2017.07.07
つい６ヶ月前ほどのことです。
youtubeのVRが見たいなぁ（その他もろもろもー）ということで、
購入したこちらの商品。
※今は1900円ぐらいですが当時3000円ぐらいしましたw
スマホで見るから大したことはないんだろうけど、
一度体感したいなぁという軽い気持ちでいろいろなコンテンツを見ていたら
それはそれは想像を遥かに超えたものでした。。。
そこで単純に考えたんですね。
「なんか作れねーかな？？」って。
そこでgoogle先生にお願いしていたら
ノンプログラマーでもVRサイトが作れるページを発見しちゃいました。
その名は、A-FRAME
https://aframe.io/
サンプルを見てみると、3Dオブジェクトも使えるし、
そもそも複雑なJSを書き込まなくても、表示や移動の設定を記載するだけで
動く代物でしたので、一度ブログ当番になるまでに作ってみようー！
ということで簡単なWebVRページを作成してみました。
素材はこちら↓
むかしむかしパンスールの求人漫画で使用した自作の宇宙船らしき謎の3Dファイル。
これにPhotoshopでテクスチャーを作ってそれっぽくアレンジw
そして、
ship.obj（3Dオブジェクト）
ship.mtl（テクスチャ）
のファイルを書き出し、「assets」フォルダへ移動。
そしてコードはこれだけです。
<body>
<!-- シーン --> →ここでA-FRAMEのJSを読み込んでます。
<a-scene inspector="url: http://aframe.io/releases/0.3.0/aframe-inspector.min.js">
<!-- 素材 --> →ここで宇宙船とコクピットらしきフレームの3Dファイルとテクスチャと背景画像などを指定しています。
<a-assets>
<a-asset-item id="ship-obj" src="../assets/obj/ship.obj"></a-asset-item>
<a-asset-item id="ship-mtl" src="../assets/obj/ship.mtl"></a-asset-item>
<a-asset-item id="front-obj" src="../assets/obj/front.obj"></a-asset-item>
<a-asset-item id="front-mtl" src="../assets/obj/front.mtl"></a-asset-item>
<img id="sky" src="../assets/images/space.jpg">
<img id="ring" src="../assets/images/ring.png">
</a-assets>
<!--カメラ--> →カメラのセッティングです。
<a-camera position="0 1.8 4">
<a-entity cursor="fuse: true; fuseTimeout: 1000"
position="0 0 -1"
geometry="primitive: ring"
scale="0.03 0.03 0.03"
material="color: green; shader: flat">
<a-image src="#ring" rotation="0 0 0" scale="60 60 60" position="0 0 0"></a-image>
<a-animation attribute="rotation" from="0 0 0" to="0 0 360" dur="30000" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
<a-entity obj-model="obj: #front-obj; mtl: #front-mtl" position="0 -80 -80" scale="100 100 100" rotation="0 180 0"></a-entity>
</a-camera>
<!-- 3Dモデル --> →読み込んだ３Dオブジェクトに対してアニメーション。直線移動してーって言ってます。
<a-entity obj-model="obj: #ship-obj; mtl: #ship-mtl" position="100 100 100" rotation="0 0 0">
<a-animation
attribute="position" from="-500 -500 -4000" to="1500 500 4000" dur="30000" repeat="indefinite" >
</a-animation>
</a-entity>
<a-entity obj-model="obj: #ship-obj; mtl: #ship-mtl" position="200 200 200" rotation="0 0 0">
<a-animation
attribute="position" from="-400 -200 -4000" to="2000 200 4000" dur="30000" repeat="indefinite">
</a-animation>
</a-entity>
//以下、複製して位置を調節しているだけなので割愛します。//
<!--ライト-->
<a-light
type="directional"
color="#FFF"
intensity="2.5"
position="-1 100 2">
</a-light>
<a-light
type="ambient"
color="#FFF">
</a-light>
<!-- 全天球背景 -->
<a-sky src="#sky" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
そして出来上がったwebVRのサイトはこちらです！※少し重いです。。。すんませんw
PCでもスマホでも閲覧可能です。
http://penseur.me/test_webvr/demo/
今のところあんまり大した出来では無いですが、（ただ向かってくる船たち笑）
デザイナーの私でもこれぐらいなら簡単にできてしまいました。
もっと複雑なこともできるらしいので、（クリックイベントなど）
研究は続けていきたいと思いますー！
youtubeのVRが見たいなぁ（その他もろもろもー）ということで、
購入したこちらの商品。
※今は1900円ぐらいですが当時3000円ぐらいしましたw
スマホで見るから大したことはないんだろうけど、
一度体感したいなぁという軽い気持ちでいろいろなコンテンツを見ていたら
それはそれは想像を遥かに超えたものでした。。。
そこで単純に考えたんですね。
「なんか作れねーかな？？」って。
そこでgoogle先生にお願いしていたら
ノンプログラマーでもVRサイトが作れるページを発見しちゃいました。
その名は、A-FRAME
https://aframe.io/
サンプルを見てみると、3Dオブジェクトも使えるし、
そもそも複雑なJSを書き込まなくても、表示や移動の設定を記載するだけで
動く代物でしたので、一度ブログ当番になるまでに作ってみようー！
ということで簡単なWebVRページを作成してみました。
素材はこちら↓
むかしむかしパンスールの求人漫画で使用した自作の宇宙船らしき謎の3Dファイル。
これにPhotoshopでテクスチャーを作ってそれっぽくアレンジw
そして、
ship.obj（3Dオブジェクト）
ship.mtl（テクスチャ）
のファイルを書き出し、「assets」フォルダへ移動。
そしてコードはこれだけです。
<body>
<!-- シーン --> →ここでA-FRAMEのJSを読み込んでます。
<a-scene inspector="url: http://aframe.io/releases/0.3.0/aframe-inspector.min.js">
<!-- 素材 --> →ここで宇宙船とコクピットらしきフレームの3Dファイルとテクスチャと背景画像などを指定しています。
<a-assets>
<a-asset-item id="ship-obj" src="../assets/obj/ship.obj"></a-asset-item>
<a-asset-item id="ship-mtl" src="../assets/obj/ship.mtl"></a-asset-item>
<a-asset-item id="front-obj" src="../assets/obj/front.obj"></a-asset-item>
<a-asset-item id="front-mtl" src="../assets/obj/front.mtl"></a-asset-item>
<img id="sky" src="../assets/images/space.jpg">
<img id="ring" src="../assets/images/ring.png">
</a-assets>
<!--カメラ--> →カメラのセッティングです。
<a-camera position="0 1.8 4">
<a-entity cursor="fuse: true; fuseTimeout: 1000"
position="0 0 -1"
geometry="primitive: ring"
scale="0.03 0.03 0.03"
material="color: green; shader: flat">
<a-image src="#ring" rotation="0 0 0" scale="60 60 60" position="0 0 0"></a-image>
<a-animation attribute="rotation" from="0 0 0" to="0 0 360" dur="30000" repeat="indefinite" easing="linear"></a-animation>
</a-entity>
<a-entity obj-model="obj: #front-obj; mtl: #front-mtl" position="0 -80 -80" scale="100 100 100" rotation="0 180 0"></a-entity>
</a-camera>
<!-- 3Dモデル --> →読み込んだ３Dオブジェクトに対してアニメーション。直線移動してーって言ってます。
<a-entity obj-model="obj: #ship-obj; mtl: #ship-mtl" position="100 100 100" rotation="0 0 0">
<a-animation
attribute="position" from="-500 -500 -4000" to="1500 500 4000" dur="30000" repeat="indefinite" >
</a-animation>
</a-entity>
<a-entity obj-model="obj: #ship-obj; mtl: #ship-mtl" position="200 200 200" rotation="0 0 0">
<a-animation
attribute="position" from="-400 -200 -4000" to="2000 200 4000" dur="30000" repeat="indefinite">
</a-animation>
</a-entity>
//以下、複製して位置を調節しているだけなので割愛します。//
<!--ライト-->
<a-light
type="directional"
color="#FFF"
intensity="2.5"
position="-1 100 2">
</a-light>
<a-light
type="ambient"
color="#FFF">
</a-light>
<!-- 全天球背景 -->
<a-sky src="#sky" rotation="0 -130 0"></a-sky>
</a-scene>
</body>
そして出来上がったwebVRのサイトはこちらです！※少し重いです。。。すんませんw
PCでもスマホでも閲覧可能です。
http://penseur.me/test_webvr/demo/
今のところあんまり大した出来では無いですが、（ただ向かってくる船たち笑）
デザイナーの私でもこれぐらいなら簡単にできてしまいました。
もっと複雑なこともできるらしいので、（クリックイベントなど）
研究は続けていきたいと思いますー！