tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
//右⼿の初期化 initLeftHand(); //左⼿の初期化 }; //右⼿の初期化を⾏う関数 function initRightHand(){ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; </script> Automatically called once the page has loaded. Function prepared to describe the behavior of the right hand. Function prepared to describe the behavior of the left hand.
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
scale="0.5 0.5 0.5" rotation="0 45 0" color="#4CC3D9" shadow></a-box> <!-- Drawing the left hand --> <a-entity id="leftHand" hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity> <!-- Drawing the rihgt hand --> <a-entity id="rightHand" hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity> </a-scene> 【hand-tracking-controls】 hand: left or right modelStyle: mesh pr dots (mesh doesnʼt work) modelColor: color of hand (Default is white) Lesson02
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
add 3D objects var rightHand; //Variable to access the right hand. var leftHand; //Variable to access the left hand. window.onload = function() { initRightHand(); //右⼿の初期化 initLeftHand(); //左⼿の初期化 }; //右⼿の初期化を⾏う関数 function initRightHand(){ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; Lesson03
add 3D objects var rightHand; //Variable to access the right hand var leftHand; //Variable to access the left hand window.onload = function() { // Keeps information in 3D space as variables. scene = document.querySelector('a-scene'); initRightHand(); //右⼿の初期化 initLeftHand(); //左⼿の初期化 }; //右⼿の初期化を⾏う関数 function initRightHand(){ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; Lesson04
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
right hand object (id=rightHand) rightHand = document.getElementById("rightHand"); //Begin pinch rightHand.addEventListener('pinchstarted', function (e) { }); //End pinch rightHand.addEventListener('pinchended', function (e) { }); //Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { }); }; Lesson05
hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { var position = e.detail.position; //Calling the addBOX function (explained in the next page) addBox(position); }); // End pinch rightHand.addEventListener('pinchended', function (e) { }); // Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { }); }; Lesson06
an element named a-box var box = document.createElement('a-box'); // Set the position, size, and color. box.setAttribute('position', position); box.setAttribute('scale', '0.02 0.02 0.02'); box.setAttribute('color', '#0062C6'); // Set class names for easy deletion later. box.setAttribute('class', 'box'); // Add a box in 3D space. scene.appendChild(box); } </script> Lesson07
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
the right hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { /*omitted*/ }); // End pinch rightHand.addEventListener('pinchended', function (e) { }); // Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { }); }; Edit here
hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener(ʻpinchstartedʼ, function (e) { /*omitted*/ }); // End pinch rightHand.addEventListener('pinchended', function (e) { }); // Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { var position = e.detail.position; //generate a box addBox(position); }); Lesson08
var leftHand; var prev;//To store the position where the last box was placed. window.onload = function() { //3D空間を変数として保持 scene = document.querySelector('a-scene'); initRightHand(); initLeftHand(); }; //右⼿の初期化を⾏う関数 function initRightHand(){ /*以下省略*/ Lesson09
{ /*omitted*/ }; //右⼿の初期化を⾏う関数 function initRightHand(){ /*omitted*/ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; //Function to add box function addBox(position){ } Edit here
element named a-box var box = document.createElement('a-box'); // Set the position, size, and color box.setAttribute('position', position); box.setAttribute('scale', '0.02 0.02 0.02'); box.setAttribute('color', '#0062C6'); // Set class names for easy deletion later box.setAttribute('class', 'box'); //Add a box in 3D space. scene.appendChild(box); // Memorize the position where the box was placed. prev=box.object3D.position; } Lesson09
{ /*omitted*/ }; //右⼿の初期化を⾏う関数 function initRightHand(){ /*omitted*/ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; //Boxの追加を⾏う関数 function addBox(position){ } Edit here
hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { /*omitted*/ }); // End pinch rightHand.addEventListener('pinchended', function (e) { }); // Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { }); }; Edit here
position = e.detail.position; // Distance between the last position of the box and // the current position of the hand var length= prev.distanceTo(position); if(length>=0.02){ //Generate a box addBox(position); } }); Lesson10 prev position 一定距離以上
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
var prev; // Array of colors to assign to a cube var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF', '#FFFFFF', '#FF2000', '#F52394', '#593110']; // Index of color array to use var index=0; window.onload = function() { //3D空間を変数として保持 scene = document.querySelector('a-scene'); initRightHand(); //右⼿の初期化 initLeftHand(); //左⼿の初期化 }; Lesson11
hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { /*omitted*/ }); // End pinch rightHand.addEventListener('pinchended', function (e) { }); // Move hand while pinching rightHand.addEventListener('pinchmoved', function (e) { /*omitted*/ }); }; Edit here
hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { var position = e.detail.position; //Generate a box addBox(position); }); // End pinch rightHand.addEventListener('pinchended', function (e) { // Add up the number of colors. index++; index%=colors.length; }); Lesson12
//右⼿の初期化を⾏う関数 function initRightHand(){ /*省略*/ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; //Function to generate a box function addBox(position){ } Edit here
named a-box var box = document.createElement('a-box'); // Set the position, size, and color box.setAttribute('position', position); box.setAttribute('scale', '0.02 0.02 0.02ʼ); box.setAttribute('color', '#0062C6'); box.setAttribute('color', colors[index]); // Set class names for easy deletion later box.setAttribute('class', 'box'); // Add a box in 3D space scene.appendChild(box); // Memorize the position where the box was placed prev=box.object3D.position; } Lesson13 box.setAttribute('color', '#0062C6');
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
}; //右⼿の初期化を⾏う関数 function initRightHand(){ /* omitted */ }; //左⼿の初期化を⾏う関数 function initLeftHand(){ }; //Function to generate a box function addBox(position){ /*omitted */ } Edit here
object. leftHand = document.getElementById("leftHand"); // Behavior at the start of a pinch leftHand.addEventListener('pinchstarted', function (e) { // Get all objects to which the box class is assigned. var els = document.querySelectorAll('.boxʼ); // Delete the boxes one by one. for (var i = 0; i < els.length; i++) { els[i].parentNode.removeChild(els[i]); } }); }; Lesson14
tracking feature. 3.Prepare work with hand tracking by javascript. 4.Describe the action of the right hand. a) Spawn an object when pinching starts. b) Spawn objects to the trajectory of the hand. c) Set the color of the next object to be added. when the pinch ends. 5.Describe the action of the left hand. a) Delete all objects at the start of pinch 6.Extra a) Always track the position of the index finger
to assign to a cube var colors = ['#0062C6', '#00AB00', '#FFCF00', '#7F00FF', '#FFFFFF', '#FF2000', '#F52394', '#593110']; // Index of color array to use var index=0; //Sphere representing the tip of the finger var tip; window.onload = function() { //3D空間を変数として保持 scene = document.querySelector('a-scene'); //Get the sphere representing the fingertip position tip = document.getElementById("tip"); initRightHand(); //右⼿の初期化 initLeftHand(); //左⼿の初期化 }; Lesson16
the right hand object (id=rightHand) rightHand = document.getElementById("rightHand"); // Track finger tips in real time (to be implemented later) tipTracking(rightHand.components['hand-tracking-controls']); // Begin pinch rightHand.addEventListener('pinchstarted', function (e) { /*omitted*/ }); // End pinch rightHand.addEventListener('pinchended', function (e) { /*omitted*/ }); Lesson17
/*omitted*/ }; function initRightHand(){ /* omitted(右⼿の初期化を⾏う関数)*/ }; function initLeftHand(){ /* omitted(左⼿の初期化を⾏う関数)*/ }; function addBox(position){ /* omitted(Boxの追加を⾏う関数)*/ } Add a function for tracking finger position here
function addBox(position){ /*omitted(Boxの追加を⾏う関数)*/ } function tipTracking(ctrl){ // Finger tip position var position = ctrl.indexTipPosition; // Assign finger position to the ball tip.setAttribute('position', position); // Call tipTracking again after 30ms setTimeout(function(){tipTracking(ctrl);}, 30); }; Lesson18
= e.detail.position; //BOX⽣成関数を呼び出す addBox(position); }); // End pinch rightHand.addEventListener('pinchended', function (e) { //⾊の番号を加算してboxの⾊に反映 index++; index%=colors.length; // Assing the color to the ball at the tip of the finger tip.setAttribute('color', colors[index]); }); Lesson19