gesture management demo and gesture template via removable event
Some checks failed
/ test (push) Has been cancelled
Some checks failed
/ test (push) Has been cancelled
This commit is contained in:
parent
e806106aa0
commit
d253a5d26b
3 changed files with 24 additions and 9 deletions
|
|
@ -17,8 +17,8 @@
|
||||||
<script src="https://xrsh.isvery.ninja/xrsh.js"></script>
|
<script src="https://xrsh.isvery.ninja/xrsh.js"></script>
|
||||||
<script src="jxr-core.js"></script>
|
<script src="jxr-core.js"></script>
|
||||||
<script src="drumkbd.js"></script>
|
<script src="drumkbd.js"></script>
|
||||||
<script src="uglyph.js"></script>
|
<script src="gestures.js"></script>
|
||||||
<script src="uglyph_tests.js"></script>
|
<script src="gestures_tests.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<a-scene>
|
<a-scene>
|
||||||
|
|
@ -103,6 +103,13 @@
|
||||||
//window.test = function( event ){ console.log('custom callback showcase:', event.detail) }
|
//window.test = function( event ){ console.log('custom callback showcase:', event.detail) }
|
||||||
//AFRAME.scenes[0].setAttribute('template-gesture-detector', 'callback:test;') // no customization
|
//AFRAME.scenes[0].setAttribute('template-gesture-detector', 'callback:test;') // no customization
|
||||||
|
|
||||||
|
let el2 = document.createElement("a-torus")
|
||||||
|
el2.id = "demotarget2"
|
||||||
|
el2.setAttribute("scale", ".1 .1 .1")
|
||||||
|
el2.setAttribute("color", "darkblue")
|
||||||
|
el2.setAttribute("position", "-.5 1.6 -1")
|
||||||
|
AFRAME.scenes[0].appendChild(el2)
|
||||||
|
|
||||||
let el = document.createElement("a-box")
|
let el = document.createElement("a-box")
|
||||||
el.id = "demotarget"
|
el.id = "demotarget"
|
||||||
el.setAttribute("scale", ".1 .1 .1")
|
el.setAttribute("scale", ".1 .1 .1")
|
||||||
|
|
@ -111,6 +118,13 @@
|
||||||
AFRAME.scenes[0].appendChild(el)
|
AFRAME.scenes[0].appendChild(el)
|
||||||
|
|
||||||
AFRAME.scenes[0].setAttribute('template-gesture-detector', 'target:#demotarget;') // no customization
|
AFRAME.scenes[0].setAttribute('template-gesture-detector', 'target:#demotarget;') // no customization
|
||||||
|
setTimeout( _ => {
|
||||||
|
AFRAME.scenes[0].removeAttribute('template-gesture-detector')
|
||||||
|
console.log('removed template-gesture-detector')
|
||||||
|
leftHand.setAttribute("pinchsecondary", "")
|
||||||
|
}, 8000 )
|
||||||
|
|
||||||
|
addNewNote('jxr ' + "AFRAME.scenes[0].setAttribute('template-gesture-detector', 'target:#demotarget2;')")
|
||||||
|
|
||||||
/*
|
/*
|
||||||
AFRAME component 'template-gesture-detector' :
|
AFRAME component 'template-gesture-detector' :
|
||||||
|
|
|
||||||
|
|
@ -174,16 +174,17 @@ AFRAME.registerComponent('template-gesture-detector', {
|
||||||
callback: {type: 'string', default: ''},
|
callback: {type: 'string', default: ''},
|
||||||
},
|
},
|
||||||
init: function () {
|
init: function () {
|
||||||
this.tick = AFRAME.utils.throttleTick(this.tick, this.data.frequency, this);
|
this.tick = AFRAME.utils.throttleTick(this.tick, this.data.frequency, this)
|
||||||
let target = this.data.target
|
},
|
||||||
let callback = this.data.callback
|
events: {
|
||||||
AFRAME.scenes[0].addEventListener('gesture', event => {
|
gesture : function (event) {
|
||||||
if (event.detail.type == 'template-gesture-detector'+'_gesture') { // filtering for this specific gesture
|
if (event.detail.type == 'template-gesture-detector'+'_gesture') { // filtering for this specific gesture
|
||||||
if (target) target.setAttribute("position", AFRAME.utils.coordinates.stringify( event.detail.targetPosition ) )
|
// example of action, could have a different result
|
||||||
|
if (this.data.target) this.data.target.setAttribute("position", AFRAME.utils.coordinates.stringify( event.detail.targetPosition ) )
|
||||||
// optional callback
|
// optional callback
|
||||||
if (callback) window[callback]( event )
|
if (this.data.callback) window[callback]( event )
|
||||||
|
}
|
||||||
}
|
}
|
||||||
} )
|
|
||||||
},
|
},
|
||||||
tick: function (t, dt) {
|
tick: function (t, dt) {
|
||||||
const myScene = AFRAME.scenes[0].object3D // optional simplification
|
const myScene = AFRAME.scenes[0].object3D // optional simplification
|
||||||
Loading…
Add table
Reference in a new issue