狠狠撸

ARコンテンツ作成勉強会
A-Frameで始めるWindows Mixed Reality
#AR_Fukuoka

A-Frameとは
? ブラウザ上でVRなどの3D表現を簡単に実現するためのライブラリ
? HTMLのタグを書くだけで3Dオブジェクトを配置できる
? Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明
? ブラウザだけでなくWindows Mixed RealityやHTC Viveなどの
HMD(Head Mounted Display)、スマホVRにも対応

まずは体験
A-Frameのページにアクセス (https://aframe.io/)

まずは体験
ページの左側にサンプルがあります
サンプル

まずは体験
基本サンプル Hello Worldをクリック
Hello World
画面をクリック
?回転：マウスでドラッグ
?左右：[A][D]キー
?前後：[W][S]キー
※前後左右は自分がどちらに動くかで考える

まずは体験
360°Imageをクリックして全天球コンテンツを表示
360°Image
RICOH Theta S

今回の内容
Step1: 3Dオブジェクトの編集
Step2: 背景を360°画像に変更
Step3: 奥颈苍惭搁の実机で确认

必要なもの
?Webブラウザ → 动作确认
?テキストエディタ → HTMLの記述
?Webサーバー → コンテンツの公開
サーバーがない人は???
?Glitchを利用 https://glitch.com/
? FacebookかGitHubのアカウントがあればOK
? サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します

基本サンプルのコード
Hello WebVRのコードを取得
GET STARTED

基本サンプルのコードの複製
Glitchユーザーはremix the starter example on Glitchをクリック
※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト
Hello WebVRに関する記述

基本サンプルのコードの複製
Remix your ownをクリック

基本サンプルのコードの確認
index.htmlをクリックし、コードが表示されることを確認
Click

ソースの確認
<html>
<head>
<title>Hello, WebVR! - A-Frame</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<script src=/slideshow/aframewindows-mixed-reality/79365610/"https:/aframe.io/releases/0.6.0/aframe.min.js">
</script>
</head>
<body>
<a-scene>
ここに表示するオブジェクトや背景の設定を記述
</a-scene>
</body>
</html>
? ヘッダー部でA-Frameの機能を提供するライブラリを取り込む
? <a-scene>と</a-scene>の間に描画に関する記述をする

ソースの確認
<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>
? 基本図形はa-xxxタグで提供されている
https://aframe.io/docs/0.6.0/primi
tives/a-box.html (例：a-boxの詳細)

动作确认
Show Liveをクリック
Click

アレンジしよう
タグ内の各パラメータを編集すれば見た目を調整可能
? position(位置)：x y zの順にスペースで区切って指定
? rotation(傾き)：各軸を中心とした回転で表現
? color(色)：カラーコード等で指定
? 他にも図形によって各種設定項目がある
radius(半径)
width(幅)
height(高さ)
depth(奥行)
src (画像など) X
Z
Y

見た目の変化を想像しながら
数値を変えるの難しくない？

モードの切り替え
キーボードの[Ctrl][Alt][i]を同時に押して下記表示に切り替える

boxの詳細情報を表示
画面の左のリストから<a-box>を選択
<a-box>

boxの詳細情報を表示
仮想視点とオブジェクトの位置関係が表示され、
画面右側に位置や角度、半径の具体的な数値が表示される
位置?角度
depth
height
width

例：位置の変更
positionのXの値を0に変更して最後に[Enter]キーを押下
position
x y z

プレビュー
画面左上のBack To Sceneをクリックしてブラウザでの表示を確認
Back To Scene
Inspect Scene

注意
編集画面で入力された値はソースには反映されていない
ブラウザで再読み込みをしたら元に戻ってしまう
最後にHTMLソース内の該当箇所をその値に書き換える

背景を360度画像をアップロード
Glitchのページに戻り、画面左の[assets]をクリック
続いて、画面情報の[Add asset]を開き[Computer→]をクリック
①assets
② Add asset

背景を360度画像をアップロード
360度画像を選んで[開く]をクリック

背景を360度画像のURLを取得
360度画像をクリック
クリック

背景を360度画像のURLを取得
Copy Urlをクリック
クリック

ソースの書き換え
画面左側のindex.htmlをクリック
クリック

ソースの書き換え
<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-sky src=/slideshow/aframewindows-mixed-reality/79365610/"さっきコピーした画像のURL"></a-sky>
</a-scene>
? a-skyの背景をcolor(色)ではなくsrc(画像へのリンク)に変更
? srcの右辺に"画像のURL"を記述

実機で動かそう
WinMRヘッドセットが接続されたPCでMicrosoft Edgeを起動し、
今作ったコンテンツにアクセスしてお気に入りに登録
☆をクリック

? WinMRヘッドセットを装着しメニューを呼び出す
? Microsoft Edgeにカーソルを合わせて決定ボタン
Microsoft Edge

? Microsoft Edgeを空間に固定
? お気に入りから先ほど登録したページを選択
お気に入り

? VRコンテンツが表示されたら右下のゴーグル型のボタンをクリック
クリック

狠狠撸

A-Frameで始めるWindows Mixed Reality

More Related Content

A-Frameで始めるWindows Mixed Reality