diff --git a/index.html b/index.html
index a3a6dd9..f6c8f59 100644
--- a/index.html
+++ b/index.html
@@ -109,7 +109,8 @@
-
+
diff --git a/jxr.js b/jxr.js
index 257bcb8..eba384b 100644
--- a/jxr.js
+++ b/jxr.js
@@ -3419,8 +3419,28 @@ function thumbToIndexAngle(){
}, 590)
}
+AFRAME.registerComponent('annotation', {
+// consider also multiple annotation but being mindful that it might clutter significantly
+ schema: {
+ content : {type: 'string'}
+ },
+ init: function () {
+ addAnnotation(this.el, this.data.content)
+ },
+ update: function () {
+ this.el.querySelector('.annotation').setAttribute('value', this.data.content )
+ // assuming single annotation
+ },
+ remove: function () {
+ this.el.querySelector('.annotation').removeFromParent()
+ //Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
+ }
+})
+
function addAnnotation(el, content){
+ // could also appear only when in close proximity or while pinching
let annotation = document.createElement( 'a-troika-text' )
+ annotation.classList.add( 'annotation' )
annotation.setAttribute('value', content)
annotation.setAttribute('position', '0 .1 -.1')
annotation.setAttribute('rotation', '-90 0 0')