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="jxr-core.js"></script>
|
||||
<script src="drumkbd.js"></script>
|
||||
<script src="uglyph.js"></script>
|
||||
<script src="uglyph_tests.js"></script>
|
||||
<script src="gestures.js"></script>
|
||||
<script src="gestures_tests.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<a-scene>
|
||||
|
|
@ -103,6 +103,13 @@
|
|||
//window.test = function( event ){ console.log('custom callback showcase:', event.detail) }
|
||||
//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")
|
||||
el.id = "demotarget"
|
||||
el.setAttribute("scale", ".1 .1 .1")
|
||||
|
|
@ -111,6 +118,13 @@
|
|||
AFRAME.scenes[0].appendChild(el)
|
||||
|
||||
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' :
|
||||
|
|
|
|||
|
|
@ -174,16 +174,17 @@ AFRAME.registerComponent('template-gesture-detector', {
|
|||
callback: {type: 'string', default: ''},
|
||||
},
|
||||
init: function () {
|
||||
this.tick = AFRAME.utils.throttleTick(this.tick, this.data.frequency, this);
|
||||
let target = this.data.target
|
||||
let callback = this.data.callback
|
||||
AFRAME.scenes[0].addEventListener('gesture', event => {
|
||||
this.tick = AFRAME.utils.throttleTick(this.tick, this.data.frequency, this)
|
||||
},
|
||||
events: {
|
||||
gesture : function (event) {
|
||||
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
|
||||
if (callback) window[callback]( event )
|
||||
if (this.data.callback) window[callback]( event )
|
||||
}
|
||||
} )
|
||||
}
|
||||
},
|
||||
tick: function (t, dt) {
|
||||
const myScene = AFRAME.scenes[0].object3D // optional simplification
|
||||
Loading…
Add table
Reference in a new issue