読者です 読者をやめる 読者になる 読者になる

A-Frameで遊んでみた

VRをやってみたいけど、UnityとかUE4とかハードル高いです!!って方!
Three.jpもjsで書くことたくさんあって分からないです!って方!
HTMLで簡単にWebVRコンテンツの作成が出来ますよ!!

A-Frameって何?

HTMLのタグでシーンを作成できるWebVR用のフレームワークです。 ベースはThree.jsでWebVR対応ブラウザではVR表示が可能です。

iPhoneやAndroidで見るとVRとして360°見渡すことが出来ます。


スポンサーリンク





遊んでみる

サンプル

aframe.io

github.com

使い方

これを読み込む https://aframe.io/releases/latest/aframe.min.js

シーンの作成

<a-scene>
</a-scene>

このシーンタブの中にこんな感じのものを書いていく

  • <a-cube>

  • <a-sphere>

  • <a-cylinder>

  • <a-plane>

  • <a-image>

  • <a-video>

  • <a-plane>

もちろん色とかx,y,zとかの設定も出来る

<a-cube width="1.5" height="3.0" depth="0.5" color="red"></a-cube>

光源は<a-light>

カメラは<a-camera>

ポジションや光源なら種類等の設定を行うことでオブジェクトの魅せ方等を変更出来る。

モデルもロード出来る。

<a-model src="https://aframe.io/aframe/examples/_models/tree1/tree1.dae"></a-model>

<a-model src="https://cslroot.github.io/a-frame-examples/assets/models/bunny_with_normals.obj"></a-model>

詳しくは最初に貼ったリンクのドキュメントなどを見るといいかも。

もう少し触ってみて、何か作れたらまた記事書きます。

Unityと比べてみたりもしたいです。

先日発売されたVRFREEKにもサンプルがいくつか載っています。

VRFREEK(ブイアールフリーク) 2016年 03 月号 [雑誌]: DTMマガジン 増刊

新品価格
¥1,944から
(2016/3/10 12:25時点)



相変わらず短い記事ですね…すみません。