Weitere ähnliche Inhalte Ähnlich wie A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応) (20) Mehr von Takashi Yoshinaga (16) Kürzlich hochgeladen (12) A-Frameで始めるWebXRとハンドトラッキング (HoloLens2/Oculus Quest対応)10. 必要なもの
Webブラウザ → コンテンツの体験や動作確認
テキストエディタ → HTMLやjavascriptの記述
Webサーバー → コンテンツの公開
サーバーに関して今回は・・・
Glitchを利用 https://glitch.com/
FacebookかGitHubのアカウントがあればOK
サーバーとエディタの両方を無料で提供
この資料ではGlitch使用を前提に説明します
27. テンプレートの確認
<script>
window.onload = function() {
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};
//右手の初期化を行う関数
function initRightHand(){
};
//左手の初期化を行う関数
function initLeftHand(){
};
</script>
読み込みが終わったら
自動的に実行される
右手の挙動を記述
するために用意した関数
左手の挙動を記述
するために用意した関数
31. 手のオブジェクトを表示
<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
38. javascriptで手の情報を使用する準備
var scene; //描画する3D空間
var rightHand; //右手の情報を保持する変数
var leftHand; //左手の情報を保持する変数
window.onload = function() {
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};
//右手の初期化を行う関数
function initRightHand(){
};
//左手の初期化を行う関数
function initLeftHand(){
}; Lesson03
39. 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
42. 右手の操作で空間にオブジェクトを生成
var scene; //描画する3D空間
var rightHand; //右手
var leftHand; //左手
window.onload = function() {
//3D空間を変数として保持
scene = document.querySelector('a-scene');
initRightHand(); //右手の初期化
initLeftHand(); //左手の初期化
};
//右手の初期化を行う関数
function initRightHand(){
};
//左手の初期化を行う関数
function initLeftHand(){ };
ここを編集
45. ピンチ開始の取得
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
55. 描画する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
57. 描画する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
64. 色を切り替える
var scene; //描画する3D空間
var rightHand; //右手
var leftHand; //左手
var 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
66. 色を切り替える
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
67. 色を切り替える
window.onload = function() {
/*省略*/
};
//右手の初期化を行う関数
function initRightHand(){
/*省略*/
};
//左手の初期化を行う関数
function initLeftHand(){
};
//Boxの追加を行う関数
function addBox(position){
}
ここを編集
68. 色を切り替える
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
box.setAttribute('color', '#0062C6');
73. 描画した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. 指の先の位置を取得する方法
<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
81. 指の先の位置を取得する方法
//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
84. 指の先の位置を取得する方法
window.onload = function() {
/*省略*/
};
function initRightHand(){
/*省略(右手の初期化を行う関数)*/
};
function initLeftHand(){
/*省略(左手の初期化を行う関数)*/
};
function addBox(position){
/*省略(Boxの追加を行う関数)*/
}
ここに指の位置追跡の
関数を追加