際際滷

ARコンテンツ恬撹茶�氏
HoloLens2とQuestではじめるWebXR

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

徭失�B初
箆兆�耳喟括(Takashi Yoshinaga)
��T�ARを喘いた匳�屶址や�\�嗷��y
Volumetric Video (3Dビデオ)
コミュニティ�ARコンテンツ恬撹茶�氏麼岸
Twitter:
@Taka_Yoshinaga

ARコンテンツ恬撹茶�氏の�B初
? 2013定5埖に茶�氏をスタ�`ト。
? ARコンテンツの恬り圭をハンズオン侘塀で僥ぶ
? 繁方は5~10兆殻業の富繁方で�g仏
? 歌紗訳周はAR/VRに�d龍がある繁(岑�R音勣)
? 光仇で�_岸 (牽�纊∃椡勝�m鍋、�L鍋、寄蛍、孫��u、表笥、ﾚ�u、奬始、�v�|)

Twitterと茶�氏ペ�`ジで秤�鵑魄k佚しています
@AR_Fukuoka Googleで仝AR茶�氏々で�碧�

牽�俿�� (エンジニアフェ & Zoom)

DoMCN
Hokkaido MotionControl Network
さって?さん
@s_haya_0820
臼今祇サテライト (�F仇 & Zoom)
じゅんさん
@jun_mh4g

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

云晩のゴ�`ル
HoloLens2やOculus Questを聞ったハンドトラッキングをWebXRでやってみよう
https://youtu.be/y4WD2wgzKYQ

�_�kツ�`ル�A-Frameの古勣
? Webブラウザ貧でVRなどの3D燕�Fを��gに�g�Fするフレ�`ムワ�`ク
? HTMLのタグを��世韻�3Dオブジェクトを塘崔できる
? Firefox、Chrome、Edgeなど麼勣なブラウザがWebVR��鬉魃軛�
? HoloLens 2やQuest 1&2、HTC Viveなどの光�NHMDに��
? Webベ�`スなのでコンテンツの巷�_?慌嗤が否叟 -> URLを慌嗤�

駅勣なもの
? Webブラウザ ★ コンテンツの悶�Yや強恬鳩範
? テキストエディタ ★ HTMLやjavascriptの�峰
? Webサ�`バ�` ★ コンテンツの巷�_
サ�`バ�`に�vして書指は???
? Glitchを旋喘 https://glitch.com/
? FacebookかGitHubのアカウントがあればOK
? サ�`バ�`とエディタの�I圭を�o創で戻工
この�Y創ではGlitch聞喘を念戻に�h苧します

テンプレ�`トコ�`ドの�}�u
https://glitch.com/~webxr-hand-template
GET STARTED

和にスクロ�`ル

Remix Your Own

テンプレ�`トの�_�J
index.htmlをクリックし、コ�`ドが燕幣されることを�_�J
index.html

index.htmlをクリックし、コ�`ドが燕幣されることを�_�J
エディタプレビュ�`

コンテンツ兆(URL)の�筝�
鮫中恣貧の猟忖双(コンテンツ兆)をクリック
ここをクリック

コンテンツ兆(URL)の�筝�
猟忖双を光徭、蛍かりやすい兆各(磯叔哂方)に�筝�
シンプルで蛍かり叟く�筝�

URLの�_�J
プレビュ�`鮫中の貧圭にある[Change URL]からURLを�_�J
Change URL
これがURL
☆�g�Cでの強恬鳩範に聞喘

�g�Cで強恬鳩範
Webブラウザのアドレスバ�`にコンテンツのURLを秘薦瘁、AR/VRボタンをクリック
URLを秘薦
ARボタン
URLを秘薦
VRボタン
HoloLens2 Quest

�嘛��徨 (HoloLens2)
書指はこれを�鹿しながらハンドトラッキングを喘いたコンテンツを恬っていきます

ハンズオンの返�
1.サンプルの古勣を盾�h
2.ハンドトラッキング�C嬬を弖紗 (返の燕幣)
3.javascriptでハンドトラッキングと�B亊する��
4.嘔返のアクションを�峰
a) ピンチ(つまみ荷恬)�_兵�rのオブジェクト弖紗
b) ピンチしながらの卞�咾没�召靴謄�屮献Д�盤啓�
c) ピンチ�K阻�rに肝指弖紗するオブジェクトの弼を�O協
5.恣返のアクションを�峰
a) ピンチ�_兵�rに畠てのオブジェクトを�茅
6.おまけ
a) 械に繁餓し峺の了崔を弖�E

Lesson01

A-Frameの�iみ�zみ
3D腎�gに宙鮫する坪否を�峰

<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>
a-box
position
0 1.5 -2
了崔寄きさ弼
�き

返の
��咾砲弔い�
�峰(嚠協)

返のオブジェクトを燕幣
ここを�鹿

返のオブジェクトを燕幣
<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はうまく�Pかず)
modelColor: 返のモデルの弼
(書指はデフォルト弼) Lesson02

�g�Cで強恬鳩範
駅ず壅�iみ�zみボタンをクリック
壅�iみ�zみ
壅�iみ�zみ

javascriptで返の秤�鵑鯤荒辰垢��
ここを�鹿

var scene; //宙鮫する3D腎�g
var rightHand; //嘔返の秤�鵑魃３屬垢�篳�
var leftHand; //恣返の秤�鵑魃３屬垢�篳�
};
};
}; Lesson03

javascriptで3D腎�gを荷恬する��
var rightHand; //嘔返
var leftHand; //恣返
//3D腎�gを�篳�箸靴同３�
scene = document.querySelector('a-scene');
};
};
function initLeftHand(){ }; Lesson04

嘔返の荷恬で腎�gにオブジェクトを伏撹
};
};
function initLeftHand(){ };
ここを�鹿

嘔返の荷恬で腎�gにオブジェクトを伏撹
//嘔返のオブジェクト(id=rightHand)を函誼
rightHand = document.getElementById("rightHand");
//ピンチ�_兵
rightHand.addEventListener('pinchstarted', function (e) {
});
//ピンチ�K阻
rightHand.addEventListener('pinchended', function (e) {
});
//ピンチしながら返を卞��
rightHand.addEventListener('pinchmoved', function (e) {
});
}; Lesson05

ピンチ�_兵の函誼
//ピンチ�_兵
});
//ピンチ�K阻
});
});
};
ここを�鹿

これから�g�Fしたいこと
つまんだ鵬�gにその了崔にオブジェクトを伏撹

ピンチ�_兵の函誼
//ピンチ�_兵
var position = e.detail.position;
//BOX伏撹�v方を柵び竃す (肝のペ�`ジ參週で盾�h)
addBox(position);
});
//ピンチ�K阻
});
});
}; Lesson06

Boxの伏撹
ここに�v方を弖紗

Boxの伏撹
};
function addBox(position){
//a-boxという勣殆を恬る
var box = document.createElement('a-box');
//了崔や寄きさ、弼を�O協
box.setAttribute('position', position);
box.setAttribute('scale', '0.02 0.02 0.02');
box.setAttribute('color', '#0062C6');
//あとで匯凄�茅しやすいようにクラス兆�O協
box.setAttribute('class', 'box');
//3肝圷腎�gにboxを弖紗
scene.appendChild(box);
}
</script>
Lesson07

返の卞�咾没��
//ピンチ�_兵
/*嶄待*/
});
//ピンチ�K阻
});
});
};
ここを�鹿

返の卞�咾没��
//ピンチ�_兵
rightHand.addEventListener(｀pinchstarted¨, function (e) {
/*嶄待*/
});
//ピンチ�K阻
});
//BOXを伏撹
addBox(position);
}); Lesson08

��}泣
あまり畜にboxを伏撹するとすぐにメモリを��Mして�咾④�Wくなる

宙鮫するBoxを�g哈く(1/6)
<script>
var prev;//恷瘁にBox崔いた了崔を��する�篳�
};
/*參和福待*/
Lesson09

var prev;//恷瘁にBox崔いた了崔を��
/*福待*/
};
/*福待*/
};
};
//Boxの弖紗を佩う�v方
}
ここを�鹿

box.setAttribute('scale', '0.02 0.02 0.02');
//あとで匯凄�茅するためにクラス兆�O協
//恷瘁にBox崔いた了崔を��
prev=box.object3D.position;
}
Lesson09

/*福待*/
};
/*福待*/
};
};
}
ここを�鹿

//ピンチ�_兵
/*嶄待*/
});
//ピンチ�K阻
});
});
};
ここを�鹿

//恷瘁にboxを崔いた了崔と�F壓の返の了崔との鉦�x
var length= prev.distanceTo(position);
//匯協鉦�x參貧ならboxを崔く
if(length>=0.02){
//BOXを伏撹
addBox(position);
}
});
Lesson10
prev
position
匯協鉦�x參貧

このあと�g�Fしたいこと
ピンチ�阿�boxの弼を�篁�気擦�

弼を俳り紋える
//Cubeに護り輝てる弼の塘双
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//旋喘する弼の桑催
var index=0;
}; Lesson11

//ピンチ�_兵
/*嶄待*/
});
//ピンチ�K阻
});
/*嶄待*/
});
};
ここを�鹿

//ピンチ�_兵
//BOX伏撹�v方を柵び竃す
addBox(position);
});
//ピンチ�K阻
//弼の桑催を紗麻して、あとでboxの弼に郡啌
index++;
index%=colors.length;
}); Lesson12

/*福待*/
};
/*福待*/
};
};
}
ここを�鹿

box.setAttribute('scale', '0.02 0.02 0.02¨);
box.setAttribute('color', colors[index]);
//あとで匯凄�茅するためにクラス兆�O協
//恷瘁にBox崔いた了崔を��
prev=box.object3D.position;
} Lesson13

宙鮫したBoxを�茅
/*福待*/
};
/*福待*/
};
};
/*福待*/
}
ここを�鹿

宙鮫したBoxを�茅
//恣返のオブジェクトを函誼
leftHand = document.getElementById("leftHand");
//ピンチ�_兵�rの��
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

峺の枠の了崔を函誼する圭隈
a-sceneを�鹿

<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

Javascript
の�峰に��

//Cubeに護り輝てる弼の塘双
var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF',
'#FFFFFF', '#FF2000', '#F52394', '#593110'];
//旋喘する弼の桑催
var index=0;
//峺の枠極を燕す白
var tip;
//峺枠の了崔を燕す白を函誼
tip = document.getElementById("tip");
};
Lesson16

/*福待*/
};
/*福待*/
};
/*福待*/
};
/*福待*/
}
ここを�鹿

//リアルタイムに峺の枠極を弖�E(この瘁�峰)
tipTracking(rightHand.components['hand-tracking-controls']);
//ピンチ�_兵
/*福待*/
});
//ピンチ�K阻
/*福待*/
});
Lesson17

/*福待*/
};
/*福待(嘔返の兜豚晒を佩う�v方)*/
};
/*福待(恣返の兜豚晒を佩う�v方)*/
};
/*福待(Boxの弖紗を佩う�v方)*/
}
ここに峺の了崔弖�Eの
�v方を弖紗

/*福待(恣返の兜豚晒を佩う�v方)*/
};
/*福待(Boxの弖紗を佩う�v方)*/
}
function tipTracking(ctrl){
//峺の枠極の了崔
var position = ctrl.indexTipPosition;
//峺の了崔を白に郡啌
tip.setAttribute('position', position);
//30ms瘁にtipTrackingを壅業柵ぶ
setTimeout(function(){tipTracking(ctrl);}, 30);
}; Lesson18

肝のBoxの弼を峺枠の白に郡啌
//ピンチ�_兵
/*嶄待*/
});
//ピンチ�K阻
});
/*嶄待*/
});
};
ここを�鹿

肝のBoxの弼を峺枠の白に郡啌
//ピンチ�_兵
//BOX伏撹�v方を柵び竃す
addBox(position);
});
//ピンチ�K阻
//弼の桑催を紗麻してboxの弼に郡啌
index++;
index%=colors.length;
//峺の枠極の白にも弼を郡啌
tip.setAttribute('color', colors[index]);
});
Lesson19

際際滷

HoloLens2とMeta QuestではじめるWebXR

Recommended

More Related Content

What's hot (20)

Similar to HoloLens2とMeta QuestではじめるWebXR (8)

More from Takashi Yoshinaga (19)

Recently uploaded (8)

HoloLens2とMeta QuestではじめるWebXR