starthome-logo 無料ゲーム
starthome-logo

始めようVRコンテンツ開発、後編 ～A-FrameでWebVR編～

前編の続きです。


目次



A-Frame + A-Frame Boilerplateを使ってWebVRアプリを開発する


さっそくですが、A-Frameを利用してWebVRアプリを作ってみたいと思います。


今回はgitとnpmを利用するので、これらのコマンドを使えるようにしておいて下さい。


A-Frame Boilerplateについて


A-Frame Boilerplateは、次の3つの機能を備えています。



  • 最新のA-FrameにリンクされたHTMLファイル

  • ローカルの開発サーバ

  • Github Pagesに簡単にデプロイする機能


要はA-Frameを利用したアプリの開発環境を簡単に整えられる仕組みですね。


ローカル開発環境の準備


まずはA-Frame Boilerplateをローカルにクローンします。


git clone https://github.com/aframevr/aframe-boilerplate.git
 cd aframe-boilerplate &&rm -rf .git &&npm install

この状態でnpm startを実行すると、ブラウザが開きA-Frameアプリケーションが表示されます。


f:id:DayBySay:20161217232848p:plain


これでローカルの開発環境は準備OKです。簡単！


次に、スマホで動作確認できるようにアプリケーションをWeb上に公開しましょう。


スマートフォンで動作確認するための環境準備


公開方法にこだわりがない &GitHubアカウントをお持ちの方はGitHub Pagesを利用しましょう。


先述の通り、A-Frame BoilerplateがGitHub Pagesへのデプロイをサポートしているので、簡単に公開できます。


まずはGitHubに公開リポジトリを作ります。


f:id:DayBySay:20161217232938p:plain


今回は https://github.com/DayBySay/my-aframe-application として作成しました。


次に、先程のaframe-boilerplateディレクトリのリモートリポジトリとして、今作成したリポジトリを登録します。


git init
 git remote add origin git@github.com:<UserName>/<RepositoryName>.git # <UserName>と <RepositoryName>は書き換えて下さい
 git add .
 npm run deploy

これでアプリケーション公開の準備が整いました。


スマートフォンで https://<UserName>.github.io/<RepositoryName/ を開き、右下のカードボードマークをタップすると下記のような画面が現れると思います。


f:id:DayBySay:20161217173409j:plain


すでに立体視になっていますね！しかもこの時点でヘッドトラッキングにも対応しています！


これで開発 ->スマホで動作確認のサイクルを回せるようになりました。


A-Frameで文字を表示する


せっかくなので少し実装をしてみましょう。


まずは Hello World という文字を表示するところまでやってみたいと思います。


A-Frameでテキスト表示する方法はいくつかありますが、公式に推奨されているのはBitmap Font Text Componentを利用する方法です。


ここで行うのは



  • Bitmap Font Text Componentのscriptをを読み込む

  • Bitmap Font Text Componentのコンポーネントを追加する


です。


ディレクトリ直下のindex.htmlを下記のように変更して下さい。


<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Hello, World! - A-Frame</title>
<metaname="description"content="Hello, World! - A-Frame">
<scriptsrc="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<scriptsrc="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
</head>
<body>
<a-scene>
<a-camera>
<a-entity id="text" position="-0.6 0.1 -1"
 bmfont-text="color: black;text: Hello World;">
</a-entity>
</a-camera>

<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>

<a-camera>の下にBitmap Font Text Componentを追加したので、常に自分の目の前にテキストが表示されるようになっています。


これをコミットし、またnpm run deployでデプロイしましょう。


スマートフォンで先程のURLを更新すると、下記の画像のような表示になっていると思います。


f:id:DayBySay:20161218015045j:plain


文字が表示できました！


動的に文字を変えてみる


文字の表示は出来ましたが、これだとインタラクション性が皆無なので面白くないです。


そこで、先程追加したテキストエリアに、自分が見ているオブジェクトの名前を表示できるような機能を追加しましょう！


ここで行うのは



  • クリックが出来るようにカーソルを追加し、特定の時間見つめるとクリックが発火されるような実装(いわゆるフューズ)にする

  • クリックの発生時にオブジェクトのidを取得して、テキストエリアにidを代入するscriptを実装する

  • オブジェクトに対して上記リスナーを追加する(ついでに表示名用のidも追加)


です


index.htmlを下記のように変更して下さい。


<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Hello, World! - A-Frame</title>
<metaname="description"content="Hello, World! - A-Frame">
<scriptsrc="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
<scriptsrc="https://rawgit.com/bryik/aframe-bmfont-text-component/master/dist/aframe-bmfont-text-component.min.js"></script>
<script>
 AFRAME.registerComponent('cursor-listener', {
 init: function () {
this.el.addEventListener("click", function (evt) {
document.getElementById("text").setAttribute("bmfont-text", "text", this.getAttribute("id"));
});
}
});
</script>
</head>
<body>
<a-scene>
<a-camera>
<a-cursor
 fuse="true"
 fuse-timeout="500"
 position="0 0 -1"
 material="color: blue;shader: flat">
</a-entity>
<a-entity id="text" position="-0.6 0.1 -1"
 bmfont-text="color: black;">
</a-entity>
</a-camera>

<a-box id="box" cursor-listener position="-1 0.5 -3" rotation="0 45 0"color="#4CC3D9"></a-box>
<a-sphere id="sphere" cursor-listener position="0 1.25 -5" radius="1.25"color="#EF2D5E"></a-sphere>
<a-cylinder id="cylinder" cursor-listener 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>

まずは<a-camera>の下に<a-cursor>を追加し、見ている場所をクリック出来るようにしています。


次にAFRAME.registerComponentでcursor-listenerコンポーネントを定義し、<a-box>などのオブジェクトに追加しました。


これによって、オブジェクトがクリックイベントを受け取った時に、AFRAME.registerComponentで定義されたスクリプトを実行するようになります。


<a-cursor>はfuseがtrueの場合、fuse-timeoutで設定されている値で自動的にclickイベントを対象オブジェクトに送信するので、今回は0.5秒間見つめることで、クリックする事が出来ます。


イベントの実装はシンプルで、idベースでbmfont-textのコンポーネントを取得し、text属性に自身のidを代入するだけです。


これをコミットし、またnpm run deployしましょう。


下記の画像のように、見つめたものの名前が表示されていれば成功です！


gif


ちなみに日本語を表示する場合は少し頑張る必要があるのですが、それについて弊社ブログの記事にまとめているので、ぜひご参照下さい！


後編のまとめ



  • WebVRアプリ開発はA-FrameとA-Frame Boilerplateで簡単に初められる！

  • A-Frameでテキスト表示するにはBitmap Font Text Componentを利用する


以上、VR開発の概要からWebVRアプリの開発環境構築まで一通り説明させていただきました。


スマートフォンで我々の生活を大きく変わったように、VRも我々の生活を良い方向に進めてくれると信じています。そんな未来を早く実現するためにも、みんなで素晴らしいVRアプリケーションをガンガン作っていきましょう！


ちなみにVOYAGE GROUPではVRアプリケーションを開発したいエンジニアやクリエイターの方を募集しておりますので、Twitterなどでお気軽にお声がけ下さい！


それでは、よいVRアプリケーション開発ライフを！


Copyright ©2016 VR Inside All Rights Reserved.

    アクセスランキング

    1. 何があった！？「エアコン」が想定外の壊れ具合！投稿者に話を聞いた

    2. 玉置浩二の妻、青田典子（53）の現在がとんでもない事になっていると話題に

    3. 柏原崇（45）現在を調べてみた結果、相変わらずかっこよすぎた！

    4. 現役女子大生グラドル、セクシー女優転身「私の全てを見ていただけると思います」

    5. ガーシーが綾野剛のLINE公開でネット騒然「ショック」「すごいエンタメ」

    6. 「愛が生まれた日」藤谷美和子（56）の現在がヤバい！？徘徊生活を送っていた過去も明らかに。

    7. 松本人志飲み会参加セクシー女優「警察に相談しに行きました」報告「さすがにこれは酷すぎる」

    8. 『こんなに可愛かった赤ちゃん犬が…』完全に想定外な『まさかの成長』が面白過ぎると82万再生「爆笑したｗ」「柴らしさ全開で好き」と絶賛

    9. 三上悠亜、整形したことを事後報告でネット騒然「素っぴんが美しすぎる」「大半を既にいじっておいて今更」

    10. ユーチューバーもこう氏、元彼女・成海瑠奈について赤裸々告白

    1. 何があった！？「エアコン」が想定外の壊れ具合！投稿者に話を聞いた

    2. 玉置浩二の妻、青田典子（53）の現在がとんでもない事になっていると話題に

    3. 柏原崇（45）現在を調べてみた結果、相変わらずかっこよすぎた！

    4. 三上悠亜、整形したことを事後報告でネット騒然「素っぴんが美しすぎる」「大半を既にいじっておいて今更」

    5. ユーチューバーもこう氏、元彼女・成海瑠奈について赤裸々告白

    6. ガーシーが綾野剛のLINE公開でネット騒然「ショック」「すごいエンタメ」

    7. 「愛が生まれた日」藤谷美和子（56）の現在がヤバい！？徘徊生活を送っていた過去も明らかに。

    8. YouTuberジュキヤの動画企画が大炎上「普通に痴漢」「気持ち悪すぎ」

    9. オードリー若林結婚で嫁の名前がソッコーで特定する動き始まる

    10. 岡本夏生（５６）、1600日ぶりにブログを更新した現在が衝撃

    game_banner
    おすすめ

    1. 松本人志飲み会参加セクシー女優「警察に相談しに行きました」報告「さすがにこれは酷すぎる」

    2. 小倉優子、不自然な“二重ライン”にネット騒然「やっぱり整形？」

    3. 由良ゆら、健康美あふれるビキニショットで1st写真集発売を発表「ゆらの宝物が増えました！」

    4. 北斗晶、３歳児の早期英語教育是非に「まずひと言ね…うるせーなと」

    5. “役満ボディー”岡田紗佳がイメチェンポニテ姿披露「お姫様みたい」と絶賛の声

    6. 【巨人】戸郷翔征が自身初の前半戦10勝目標「オールスターはシーズンの区切り」現在６勝、

    7. 佐藤二朗、妻からの直近「残酷名言」明かす「すべて挙げたら広辞苑ほどの厚さになる」

    8. 【ユーロ】ルーマニア24年ぶり勝利！マリン「街角で祝ってくれていると考えるだけで鳥肌」

    9. バンクーバー留学中の光浦靖子YouTube開設、初動画に出演タレント「これはバズらないわ」

    10. 【日本ハム】ドラ１細野晴希のパーフェクトデビューが「直球破壊王子」に阻止される

    Starthome

    StartHomeカテゴリー

    Copyright 2024
    ©KINGSOFT JAPAN INC. ALL RIGHTS RESERVED.