HoloLens2とQuestではじめるWebXR

ARコンテンツ作成勉強会 HoloLens2とQuestではじめるWebXR

もろもろのダウンロード http://arfukuoka.lolipop.jp/ WebXR2021/Sample.zip

http://arfukuoka.lolipop.jp/WebXR2021/Sample.zip

自己紹介氏名：吉永崇(Takashi Yoshinaga) 専門：ARを用いた医療支援や運動計測 Volumetric Video (3Dビデオ) コミュニティ：ARコンテンツ作成勉強会主催 Twitter: @Taka_Yoshinaga

4.

ARコンテンツ作成勉強会の紹介  2013年5月に勉強会をスタート。  ARコンテンツの作り方をハンズオン形式で学ぶ  人数は5~10名程度の少人数で実施  参加条件はAR/VRに興味がある人(知識不要)  各地で開催 (福岡、熊本、宮崎、長崎、大分、鹿児島、山口、広島、札幌、関東)

5.

Twitterと勉強会ページで情報を発信しています @AR_Fukuoka Googleで「AR勉強会」で検索

6.

福岡会場 (エンジニアフェ & Zoom)

7.

北海道サテライト (現地 & Zoom) DoMCN Hokkaido MotionControl Network じゅんさんさって〜さん @jun_mh4g @s_haya_0820

8.

OSC2021 Fukuoka (YouTube)

9.

ハッシュタグ #AR_Fukuoka #DoMCN #osc21fk #WebXR

10.

本題に入ります

11.

本日のゴール https://youtu.be/y4WD2wgzKYQ HoloLens2やOculus Questを使ったハンドトラッキングをWebXRでやってみよう

https://youtu.be/y4WD2wgzKYQ

12.

開発ツール：A-Frameの概要  Webブラウザ上でVRなどの3D表現を簡単に実現するフレームワーク  HTMLのタグを書くだけで3Dオブジェクトを配置できる  Firefox、Chrome、Edgeなど主要なブラウザがWebVR対応を表明  HoloLens 2やQuest 1&2、HTC Viveなどの各種HMDに対応  Webベースなのでコンテンツの公開・共有が容易 -> URLを共有！

13.

必要なもの  Webブラウザ → コンテンツの体験や動作確認  テキストエディタ → HTMLやjavascriptの記述  Webサーバー → コンテンツの公開サーバーに関して今回は・・・  Glitchを利用 https://glitch.com/ ◆ FacebookかGitHubのアカウントがあればOK ◆ サーバーとエディタの両方を無料で提供この資料ではGlitch使用を前提に説明します

https://glitch.com/

14.

テンプレートコードの複製 https://glitch.com/~webxr-hand-template GET STARTED

https://glitch.com/~webxr-hand-template

15.

下にスクロールテンプレートコードの複製

16.

テンプレートコードの複製 Remix Your Own

17.

テンプレートの確認 index.htmlをクリックし、コードが表示されることを確認 index.html

18.

テンプレートの確認 index.htmlをクリックし、コードが表示されることを確認エディタプレビュー

19.

コンテンツ名(URL)の変更画面左上の文字列(コンテンツ名)をクリックここをクリック

20.

コンテンツ名(URL)の変更文字列を各自、分かりやすい名称(半角英数)に変更シンプルで分かり易く変更

21.

URLの確認プレビュー画面の上方にある[Change URL]からURLを確認 Change URL これがURL ※実機での動作確認に使用

22.

実機で動作確認 HoloLens2 URLを入力 Quest URLを入力 VRボタン ARボタン WebブラウザのアドレスバーにコンテンツのURLを入力後、AR/VRボタンをクリック

23.

動作の様子 (HoloLens2) 今回はこれを編集しながらハンドトラッキングを用いたコンテンツを作っていきます

24.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

25.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

26.

テンプレートの確認 Lesson01

27.

テンプレートの確認 A-Frameの読み込み 3D空間に描画する内容を記述

28.

テンプレートの確認向き <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-scene> 位置大きさ色 position 0 1.5 -2 a-box

29.

テンプレートの確認手の挙動について記述(予定)

30.

テンプレートの確認 <script> window.onload = function() { initRightHand(); //右手の初期化 initLeftHand(); //左手の初期化 }; //右手の初期化を行う関数 function initRightHand(){ 読み込みが終わったら自動的に実行される右手の挙動を記述するために用意した関数 }; //左手の初期化を行う関数 function initLeftHand(){ }; </script> 左手の挙動を記述するために用意した関数

31.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

32.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

33.

手のオブジェクトを表示ここを編集

34.

[beta]

手のオブジェクトを表示
<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 id="leftHand"
hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
<!--右手の描画-->
<a-entity id="rightHand"
hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
</a-scene>
【hand-tracking-controlsの詳細]】
hand: left または right
modelStyle: mesh または dots
(meshはうまく働かず)
modelColor: 手のモデルの色

(今回はデフォルト色)

Lesson02

35.

実機で動作確認再読み込み再読み込み必ず再読み込みボタンをクリック

36.

動作確認

37.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

38.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

39.

javascriptで手の情報を使用する準備ここを編集

40.

javascriptで手の情報を使用する準備 <script> ここに変数を追加 window.onload = function() { initRightHand(); //右手の初期化 initLeftHand(); //左手の初期化 }; //右手の初期化を行う関数 function initRightHand(){ }; //左手の初期化を行う関数 function initLeftHand(){ }; </script>

41.

javascriptで手の情報を使用する準備 var scene; //描画する3D空間 var rightHand; //右手の情報を保持する変数 var leftHand; //左手の情報を保持する変数 window.onload = function() { initRightHand(); //右手の初期化 initLeftHand(); //左手の初期化 }; //右手の初期化を行う関数 function initRightHand(){ }; //左手の初期化を行う関数 function initLeftHand(){ }; Lesson03

42.

javascriptで3D空間を操作する準備 var scene; //描画する3D空間 var rightHand; //右手 var leftHand; //左手 window.onload = function() { //3D空間を変数として保持 scene = document.querySelector('a-scene'); initRightHand(); //右手の初期化 initLeftHand(); //左手の初期化 }; //右手の初期化を行う関数 function initRightHand(){ }; //左手の初期化を行う関数 function initLeftHand(){ }; Lesson04

43.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

44.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

45.

右手の操作で空間にオブジェクトを生成 var scene; //描画する3D空間 var rightHand; //右手 var leftHand; //左手 window.onload = function() { //3D空間を変数として保持 scene = document.querySelector('a-scene'); initRightHand(); //右手の初期化 initLeftHand(); //左手の初期化 }; //右手の初期化を行う関数 function initRightHand(){ ここを編集 }; //左手の初期化を行う関数 function initLeftHand(){ };

46.

[beta]

右手の操作で空間にオブジェクトを生成
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
});
};

Lesson05

47.

[beta]

ピンチ開始の取得
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
ここを編集

});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
});
};

48.

これから実現したいことつまんだ瞬間にその位置にオブジェクトを生成

49.

[beta]

ピンチ開始の取得
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
var position = e.detail.position;
//BOX生成関数を呼び出す (次のページ以降で解説)
addBox(position);
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
});
Lesson06
};

50.

Boxの生成ここに関数を追加

51.

[beta]

Boxの生成
//左手の初期化を行う関数
function initLeftHand(){
};
function addBox(position){
//a-boxという要素を作る
var box = document.createElement('a-box');
//位置や大きさ、色を設定
box.setAttribute('position', position);
box.setAttribute('scale', '0.02 0.02 0.02');
box.setAttribute('color', '#0062C6');
//あとで一括削除しやすいようにクラス名設定
box.setAttribute('class', 'box');
//3次元空間にboxを追加
scene.appendChild(box);
}
</script>

Lesson07

52.

動作確認

53.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

54.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

55.

[beta]

手の移動に追従
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
/*中略*/
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
ここを編集

});
};

56.

[beta]

手の移動に追従
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener(‘pinchstarted’, function (e) {
/*中略*/
});

//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
var position = e.detail.position;
//BOXを生成
addBox(position);
});

Lesson08

57.

動作確認

58.

問題点あまり密にboxを生成するとすぐにメモリを消費して動きが遅くなる

59.

[beta]

描画するBoxを間引く(1/6)
<script>
var scene; //描画する3D空間
var rightHand; //右手
var leftHand; //左手
var prev;//最後にBox置いた位置を記憶する変数
window.onload = function() {
//3D空間を変数として保持
scene = document.querySelector('a-scene');
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};
//右手の初期化を行う関数
function initRightHand(){
/*以下省略*/
Lesson09

60.

描画するBoxを間引く(2/6) var prev;//最後にBox置いた位置を記憶 window.onload = function() { /*省略*/ }; //右手の初期化を行う関数 function initRightHand(){ /*省略*/ }; //左手の初期化を行う関数 function initLeftHand(){ }; //Boxの追加を行う関数 function addBox(position){ ここを編集 }

61.

[beta]

描画するBoxを間引く(3/6)
function addBox(position){
//a-boxという要素を作る
var box = document.createElement('a-box');
//位置や大きさ、色を設定
box.setAttribute('position', position);
box.setAttribute('scale', '0.02 0.02 0.02');
box.setAttribute('color', '#0062C6');
//あとで一括削除するためにクラス名設定
box.setAttribute('class', 'box');
//3次元空間にboxを追加
scene.appendChild(box);
//最後にBox置いた位置を記憶
prev=box.object3D.position;
}

Lesson09

62.

描画するBoxを間引く(4/6) var prev;//最後にBox置いた位置を記憶 window.onload = function() { /*省略*/ }; //右手の初期化を行う関数 function initRightHand(){ /*省略*/ }; //左手の初期化を行う関数 function initLeftHand(){ }; //Boxの追加を行う関数 function addBox(position){ } ここを編集

63.

[beta]

描画するBoxを間引く(5/6)
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
/*中略*/
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
ここを編集

});
};

64.

[beta]

描画するBoxを間引く(6/6)
rightHand.addEventListener('pinchmoved', function (e) {
var position = e.detail.position;
//最後にboxを置いた位置と現在の手の位置との距離
var length= prev.distanceTo(position);
//一定距離以上ならboxを置く
if(length>=0.02){
//BOXを生成
addBox(position);
}
});
一定距離以上

position
prev

Lesson10

65.

動作確認

66.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

67.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

68.

このあと実現したいことピンチ毎にboxの色を変化させる

69.

[beta]

色を切り替える
var
var
var
var

scene; //描画する3D空間
rightHand; //右手
leftHand; //左手
prev;//最後にBox置いた位置を記憶

//Cubeに割り当てる色の配列
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//利用する色の番号
var index=0;
window.onload = function() {
//3D空間を変数として保持
scene = document.querySelector('a-scene');
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};

Lesson11

70.

[beta]

色を切り替える
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
/*中略*/
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
ここを編集

});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
/*中略*/
});
};

71.

[beta]

色を切り替える
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
var position = e.detail.position;
//BOX生成関数を呼び出す
addBox(position);
});

//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
//色の番号を加算して、あとでboxの色に反映
index++;
index%=colors.length;
});
Lesson12

72.

色を切り替える window.onload = function() { /*省略*/ }; //右手の初期化を行う関数 function initRightHand(){ /*省略*/ }; //左手の初期化を行う関数 function initLeftHand(){ }; //Boxの追加を行う関数 function addBox(position){ ここを編集 }

73.

[beta]

色を切り替える
function addBox(position){
//a-boxという要素を作る
var box = document.createElement('a-box');
//位置や大きさ、色を設定
box.setAttribute('position', position);
box.setAttribute('scale', '0.02 0.02 0.02’);
box.setAttribute('color', '#0062C6');
box.setAttribute('color', colors[index]);
//あとで一括削除するためにクラス名設定
box.setAttribute('class', 'box');
//3次元空間にboxを追加
scene.appendChild(box);
//最後にBox置いた位置を記憶
prev=box.object3D.position;
}

Lesson13

74.

動作確認

75.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

76.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

77.

描画したBoxを削除 var prev;//最後にBox置いた位置を記憶 window.onload = function() { /*省略*/ }; //右手の初期化を行う関数 function initRightHand(){ /*省略*/ }; //左手の初期化を行う関数 function initLeftHand(){ ここを編集 }; //Boxの追加を行う関数 function addBox(position){ /*省略*/ }

78.

[beta]

描画したBoxを削除
function initLeftHand(){
//左手のオブジェクトを取得
leftHand = document.getElementById("leftHand");
//ピンチ開始時の挙動
leftHand.addEventListener('pinchstarted', function (e) {
//boxクラスが割り当てられているオブジェクトを全て取得
var els = document.querySelectorAll('.box’);
//一つ一つ削除していく
for (var i = 0; i < els.length; i++) {

els[i].parentNode.removeChild(els[i]);
}
});

};
Lesson14

79.

動作確認

80.

完成

81.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

82.

ハンズオンの手順 1.サンプルの概要を解説 2.ハンドトラッキング機能を追加 (手の表示) 3.javascriptでハンドトラッキングと連携する準備 4.右手のアクションを記述 a) ピンチ(つまみ操作)開始時のオブジェクト追加 b) ピンチしながらの移動に追従してオブジェクト追加 c) ピンチ終了時に次回追加するオブジェクトの色を設定 5.左手のアクションを記述 a) ピンチ開始時に全てのオブジェクトを削除 6.おまけ a) 常に人差し指の位置を追跡

83.

指の先の位置を取得する方法 a-sceneを編集

84.

[beta]

指の先の位置を取得する方法
<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 id="leftHand" hand-tracking-controls="hand: left;
modelStyle: dots;"></a-entity>
<a-entity id="rightHand" hand-tracking-controls="hand: right;
modelStyle: dots;"></a-entity>
<!--指先に表示する球-->
<a-sphere id="tip" position="0 0 0" radius="0.015"
color="#0062C6"></a-sphere>
</a-scene>

Lesson15

85.

テンプレートの確認 Javascript の記述に戻る

86.

[beta]

指の先の位置を取得する方法
//Cubeに割り当てる色の配列
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//利用する色の番号
var index=0;
//指の先端を表す球
var tip;
window.onload = function() {
//3D空間を変数として保持
scene = document.querySelector('a-scene');
//指先の位置を表す球を取得
tip = document.getElementById("tip");
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};

Lesson16

87.

指の先の位置を取得する方法 var prev;//最後にBox置いた位置を記憶 window.onload = function() { /*省略*/ }; //右手の初期化を行う関数 function initRightHand(){ /*省略*/ }; //左手の初期化を行う関数 function initLeftHand(){ /*省略*/ }; //Boxの追加を行う関数 function addBox(position){ /*省略*/ } ここを編集

88.

[beta]

指の先の位置を取得する方法
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");

//リアルタイムに指の先端を追跡(この後記述)
tipTracking(rightHand.components['hand-tracking-controls']);
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
/*省略*/
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
/*省略*/
});
Lesson17

89.

指の先の位置を取得する方法 window.onload = function() { /*省略*/ }; function initRightHand(){ /*省略(右手の初期化を行う関数)*/ }; function initLeftHand(){ /*省略(左手の初期化を行う関数)*/ }; function addBox(position){ /*省略(Boxの追加を行う関数)*/ } ここに指の位置追跡の関数を追加

90.

指の先の位置を取得する方法 function initLeftHand(){ /*省略(左手の初期化を行う関数)*/ }; function addBox(position){ /*省略(Boxの追加を行う関数)*/ } function tipTracking(ctrl){ //指の先端の位置 var position = ctrl.indexTipPosition; //指の位置を球に反映 tip.setAttribute('position', position); //30ms後にtipTrackingを再度呼ぶ setTimeout(function(){tipTracking(ctrl);}, 30); }; Lesson18

91.

[beta]

次のBoxの色を指先の球に反映
function initRightHand(){
//右手のオブジェクト(id=rightHand)を取得
rightHand = document.getElementById("rightHand");
//ピンチ開始
rightHand.addEventListener('pinchstarted', function (e) {
/*中略*/
});
//ピンチ終了
rightHand.addEventListener('pinchended', function (e) {
ここを編集

});
//ピンチしながら手を移動
rightHand.addEventListener('pinchmoved', function (e) {
/*中略*/
});
};

92.

次のBoxの色を指先の球に反映 //ピンチ開始 rightHand.addEventListener('pinchstarted', function (e) { var position = e.detail.position; //BOX生成関数を呼び出す addBox(position); }); //ピンチ終了 rightHand.addEventListener('pinchended', function (e) { //色の番号を加算してboxの色に反映 index++; index%=colors.length; //指の先端の球にも色を反映 tip.setAttribute('color', colors[index]); }); Lesson19

HoloLens2とQuestではじめるWebXR

Takashi Yoshinaga

関連スライド

ARCore Geospatial API x Unityハンズオン by AR Fukuoka

Unityで始めるWebAR with ZapWorks

Getting Started with ARCore Geospatial API & Unity

AR.jsとA-Frameではじめるお手軽WebAR/VR

はじめようShader Graph: クロマキー処理

XREAL Air and Nreal Light開発入門

各ページのテキスト