![まずは体験
基本サンプル Hello WebVRをクリック
画面をクリック
回転：マウスでドラッグ
左右：[A][D]キー
前後：[W][S]キー
※前後左右は自分がどちらに動くかで考える](https://image.slidesharecdn.com/yoshinaga-pre-210707131526/85/HoloLens-2-Oculus-Quest-WebXR-19-320.jpg)
![[編集例]
<a-scene background="color: #0000FF">
<a-box position="-1 0.5 -3" rotation="0 45 45" 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="0.2"
color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0"
width="4" height="4" color="#7BC8A4"></a-plane>
<a-text position="0 1.5 -2" align="center" color="#000000”
value="AR Fukuoka"></a-text>
</a-scene>
HTML編集に慣れよう
角度
高さ
色](https://image.slidesharecdn.com/yoshinaga-pre-210707131526/85/HoloLens-2-Oculus-Quest-WebXR-36-320.jpg)
![URLの確認
プレビュー画面の上方にある[Change URL]からURLを確認
Change URL
これがURL
※実機での動作確認に使用](https://image.slidesharecdn.com/yoshinaga-pre-210707131526/85/HoloLens-2-Oculus-Quest-WebXR-40-320.jpg)
![手のオブジェクトを表示
<a-scene background="color: #ECECEC">
<a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0"
color="#4CC3D9" shadow></a-box>
<!--左手の描画-->
<a-entity
hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
<!--右手の描画-->
<a-entity
hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
</a-scene>
【hand-tracking-controlsの詳細]】
hand: left または right
modelStyle: mesh または dots
(meshはうまく働かず)
modelColor: 手のモデルの色
(今回はデフォルト色)](https://image.slidesharecdn.com/yoshinaga-pre-210707131526/85/HoloLens-2-Oculus-Quest-WebXR-43-320.jpg)
【準備編！】HoloLens 2/Oculus Quest対応WebXRハンズオン
- 2. 自己紹介 氏名：吉永崇(Takashi Yoshinaga) 専門：ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ：ARコンテンツ作成勉強会 主催
- 3. ARコンテンツ作成勉強会の紹介 2013年5月に勉強会をスタート。 ARコンテンツの作り方をハンズオン形式で学ぶ 人数は5~10名程度の少人数で実施 参加条件はAR/VRに興味がある人(知識不要) 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、札幌、関東)
- 6. 本題に入ります
- 9. ブラウザの設定(Oculus Quest) 詳細設定ページが表示される handで検索 WebXR experiences with hand and joints tracking をEnabledに変更
- 15. 開発ツール：A-Frameの概要 Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク HTMLのタグを書くだけで3Dオブジェクトを配置できる Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明 HoloLens2やOculus Quest、HTC Viveなどの各種HMDに対応 上記Webブラウザやデバイスで動くのでコンテンツの公開・共有が容易
- 18. まずは体験 基本サンプル Hello WebVRをクリック Hello WebVR
- 19. まずは体験 基本サンプル Hello WebVRをクリック 画面をクリック 回転：マウスでドラッグ 左右：[A][D]キー 前後：[W][S]キー ※前後左右は自分がどちらに動くかで考える
- 22. 必要なもの Webブラウザ → コンテンツの体験や動作確認 テキストエディタ → HTMLやjavascriptの記述 Webサーバー → コンテンツの公開 サーバーに関して今回は・・・ Glitchを利用 https://glitch.com/ FacebookかGitHubのアカウントがあればOK サーバーとエディタの両方を無料で提供 この資料ではGlitch使用を前提に説明します
- 25. 基本サンプルのコードの複製 Glitchユーザーはremix the starter example on Glitchをクリック ※通常はHello WebVRの記述をコピーし、自作のHTMLファイルにペースト Click
- 28. ソースの確認 <html> <head> <title>Hello, WebVR! - A-Frame</title> <meta name="description" content="Hello, WebVR! - A-Frame"> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"> </script> </head> <body> <a-scene background="color: #ECECEC"> 表示するオブジェクトや背景の設定をここに記述 </a-scene> </body> </html> ヘッダー部でA-Frameの機能を提供するライブラリを取り込む <a-scene>と</a-scene>の間に描画に関する記述をする
- 29. ソースの確認 <a-scene background="color: #ECECEC"> <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-scene> 基本図形はa-xxxタグで提供されている https://aframe.io/docs/1.2.0/primi tives/a-box.html (例：a-boxの詳細) 位置 回転 色
- 30. 動作確認 Show
- 31. 動作確認 Next to The Code
- 32. 動作確認 on PC
- 33. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 (0 1.25 -5) 位置 回転 色 x y z座標
- 34. アレンジしよう (まだやらなくてOK) タグ内の各パラメータを編集してCGの見た目を調整 position(位置)：x y zの順にスペースで区切って指定 rotation(傾き)：各軸を中心とした回転で表現 color(色)：カラーコード等で指定 他にも図形によって各種設定項目がある X Z Y (0 1.25 -5) 【設定項目の例】 radius(半径) width(幅) height(高さ) depth(奥行) src (画像など) 原点
- 36. [編集例] <a-scene background="color: #0000FF"> <a-box position="-1 0.5 -3" rotation="0 45 45" 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="0.2" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-text position="0 1.5 -2" align="center" color="#000000” value="AR Fukuoka"></a-text> </a-scene> HTML編集に慣れよう 角度 高さ 色
- 43. 手のオブジェクトを表示 <a-scene background="color: #ECECEC"> <a-box position="0 1.5 -2" scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <!--左手の描画--> <a-entity hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity> <!--右手の描画--> <a-entity hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity> </a-scene> 【hand-tracking-controlsの詳細]】 hand: left または right modelStyle: mesh または dots (meshはうまく働かず) modelColor: 手のモデルの色 (今回はデフォルト色)
- 45. 今日はここまで！