diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b9db245b..b3e525155 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,12 @@ # 1.6.1-dev -... nothing yet +## aframe-ar.js + +- aframe-ar.js - `` elements will emit `markerFound` and `markerLost` events, if they have `emitevents='true'` set. + +## Demos + +- Created [an example](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-events.html) that demonstrates emitting events when markers are found and lost, and registering the respective event listeners. # 1.6.0 diff --git a/aframe/README.md b/aframe/README.md index 4519b4c92..a6fb5aad1 100644 --- a/aframe/README.md +++ b/aframe/README.md @@ -27,6 +27,8 @@ Move the camera instead of using the usual "camera looking toward negative-z and Handle multiple indepant markers in a single scene. +- [marker-events.html](https://jeromeetienne.github.io/AR.js/aframe/examples/marker-events.html): +Emit events when markers are found and lost, and register the respective event listeners. # artoolkit system @@ -57,6 +59,7 @@ Here are the attributes for this entity | url | url of the pattern - IIF type='pattern' | artoolkitmarker.patternUrl | | value | value of the barcode - IIF type='barcode' | artoolkitmarker.barcodeValue | | preset | parameters preset - ['hiro', 'kanji'] | artoolkitmarker.preset | +| emitevents | emits 'markerFound' and 'markerLost' events - ['true', 'false'] | - | # \ diff --git a/aframe/examples/marker-events.html b/aframe/examples/marker-events.html new file mode 100644 index 000000000..636ab478f --- /dev/null +++ b/aframe/examples/marker-events.html @@ -0,0 +1,53 @@ + + + + + + + +
+ AR.js - marker events example for a-frame +
+ Contact me any time at @jerome_etienne +
+ + + + + + + + + + + + + + + + diff --git a/aframe/src/component-anchor.js b/aframe/src/component-anchor.js index ff9bfd787..db2755813 100644 --- a/aframe/src/component-anchor.js +++ b/aframe/src/component-anchor.js @@ -34,6 +34,12 @@ AFRAME.registerComponent('arjs-anchor', { type: 'number', default: 0.6, }, + + // Whether to emit events when the element is found or lost. + emitevents: { + type: 'boolean', + default: false, + } }, init: function () { var _this = this @@ -155,7 +161,16 @@ AFRAME.registerComponent('arjs-anchor', { // honor visibility ////////////////////////////////////////////////////////////////////////////// if( _this._arAnchor.parameters.changeMatrixMode === 'modelViewMatrix' ){ + var wasVisible = _this.el.object3D.visible _this.el.object3D.visible = this._arAnchor.object3d.visible + + if( _this.data.emitevents ){ + if( _this.el.object3D.visible && !wasVisible ){ + _this.el.emit('markerFound') + }else if( !_this.el.object3D.visible && wasVisible ){ + _this.el.emit('markerLost') + } + } }else if( _this._arAnchor.parameters.changeMatrixMode === 'cameraTransformMatrix' ){ _this.el.sceneEl.object3D.visible = this._arAnchor.object3d.visible }else console.assert(false) @@ -212,6 +227,7 @@ AFRAME.registerPrimitive('a-marker', AFRAME.utils.extendDeep({}, AFRAME.primitiv 'preset': 'arjs-anchor.preset', 'minConfidence': 'arjs-anchor.minConfidence', 'markerhelpers': 'arjs-anchor.markerhelpers', + 'emitevents': 'arjs-anchor.emitevents', 'hit-testing-renderDebug': 'arjs-hit-testing.renderDebug', 'hit-testing-enabled': 'arjs-hit-testing.enabled',