added controller things

app/example/helloworld-html.js

@@ -13,7 +13,7 @@ AFRAME.registerComponent('helloworld-html', {
   },
 
   dom: {
-    scale:   3,
+    scale:   1,
     events:  ['click'],
     html:    (me) => `<div>
                         <div class="pad"> helloworld-html: ${me.data.foo} <b>${me.data.myvalue}</b></span>

app/example/helloworld-htmlform.js

@@ -12,7 +12,7 @@ AFRAME.registerComponent('helloworld-htmlform', {
   },
 
   dom: {
-    scale:   3,
+    scale:   1,
     events:  ['click','input'],
     html:    (me) => `<div class="light">
                         <fieldset>

app/example/helloworld-window.js

@@ -12,7 +12,7 @@ AFRAME.registerComponent('helloworld-window', {
   },
 
   dom: {
-    scale:   3,
+    scale:   1,
     events:  ['click','keydown'],
     html:    (me) => `<div>
                         <div class="pad"> ${me.data.foo} <b>${me.data.myvalue}</b></span>
@@ -25,7 +25,6 @@ AFRAME.registerComponent('helloworld-window', {
 
     // component events
     html:     function( ){ console.log("html-mesh requirement mounted") },
-    stylis:   function( ){ console.log("stylis    requirement mounted") },
 
     // combined AFRAME+DOM reactive events
     click:   function(e){ }, // 

app/example/helloworld.js

@@ -5,10 +5,15 @@ AFRAME.registerComponent('helloworld', {
 
   init: function () {
     this.el.object3D.visible = false
-    this.el.setAttribute("geometry","primitive: octahedron")
+
-    this.interval = setInterval( () => { 
+    this.el.innerHTML = `
-        this.data.myvalue = ((this.data.myvalue||1.0) + 0.25) % 1
+       <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
-    }, 400 )
+       <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
+       <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
+       <a-entity position="0 1.8 -3" scale="10 10 10" text="value: ${this.data.foo}; align:center; color:#888"></a-entity>
+    `
+
+    this.interval     = setInterval( () => this.data.wireframe = !this.data.wireframe, 500  )
   },
 
   requires:{
@@ -26,7 +31,9 @@ AFRAME.registerComponent('helloworld', {
     },
 
     // reactive this.data value demo 
-    myvalue:function( ){ this.el.object3D.children[0].scale.y = this.data.myvalue }
+    wireframe:function( ){ 
+      this.el.object3D.traverse( (obj) => obj.material && (obj.material.wireframe = this.data.wireframe) )
+    }
 
   },
 

app/example/helloworld.old.js

@@ -1,137 +0,0 @@
-AFRAME.registerComponent('helloworld', {
-  schema: { 
-    foo: { type:"string"}
-  },
-
-  requires:{
-    html:        "https://unpkg.com/aframe-htmlmesh@2.1.0/build/aframe-html.js",  // html to AFRAME
-    stylis:      "https://unpkg.com/stylis@4.3.1/dist/umd/stylis.js",             // modern CSS (https://stylis.js.org)
-  },
-
-  dom: {
-    scale:   3,
-    events:  ['click','input'],
-    html:    (me) => `
-              <div id="${me.el.uid}" class="modal hello">
-                <div class="top">
-                  <div class="title">Hello world</div>
-                </div>
-                <br><br>
-                <fieldset>
-                  <legend>Colour</legend>
-                  <input type="radio" id="color-red" name="color" value="red" checked><label for="color-red"> Red</label><br>
-                  <input type="radio" id="color-blue" name="color" value="blue"><label for="color-blue"> Blue</label><br>
-                </fieldset>
-                <fieldset>
-                  <legend>Material:</legend>
-                  <input id="material-wireframe" type="checkbox" name="wireframe"><label for="material-wireframe"> Wireframe</label><br>
-                </fieldset>
-                <fieldset>
-                  <legend>Size: <span id="value"></span></legend>
-                  <input type="range" min="0.1" max="2" value="1" step="0.01" id="myRange" style="background-color: transparent;">
-                </fieldset>
-                <button>hello</button>
-              </div>`,
-    css:     `
-              /* 
-*              * HTML-2-WebGL limitations / guidelines for html-mesh compatibility:
-               * no icon libraries (favicon e.g.)
-               * in case of 'border-radius: 2px 3px 4px 5px' (2px will apply to all corners)
-               * dont use transform: scale(1.2) e.g.   
-*              */
-              .modal.hello {
-                position:relative;
-                top:0;
-                width:200px;
-                .title { font-weight:bold; } /* modern nested buildless css thanks to stylis */
-              }`
-  },
-
-  events:{
-
-    html:    function( ){ console.log("html-mesh requirement mounted") },
-    stylis:  function( ){ console.log("stylis    requirement mounted") },
-
-    DOMready: function(e){
-      // our reactive dom element has been added to the dom (DOMElement = this.el.dom)
-    },
-
-    click: function(e){ // a click was detected on this.el.dom or AFRAME entity
-      let el = e.detail.target || e.detail.srcElement
-      if( !el ) return
-      if( el.className.match("fold")  ) this.el.toggleFold()
-      if( el.className.match("close") ) this.el.close()
-    },  
-
-    input: function(e){
-      if( !e.detail.target                 ) return
-      if(  e.detail.target.id == 'myRange' ) this.data.value = e.detail.target.value // reactive demonstration
-    },
-
-    value: function(e){ this.el.dom.querySelector("#value").innerHTML = e.detail.v },   // auto-emitted when this.data.value gets updated
-
-  },
-
-  init: function () {  
-    this.require( this.requires )
-    
-    this.scene.addEventListener('apps:2D', () => this.el.setAttribute('visible', false) )
-    this.scene.addEventListener('apps:XR', () => {
-      this.el.setAttribute('visible', true) 
-      this.el.setAttribute("html",`html:#${this.el.uid}; cursor:#cursor`)
-    })
-  },
-
-  manifest: { // HTML5 manifest to identify app to xrsh
-    "short_name": "Hello world",
-    "name": "Hello world",
-    "icons": [
-      {
-        "src": "/images/icons-vector.svg",
-        "type": "image/svg+xml",
-        "sizes": "512x512"
-      }
-    ],
-    "id": "/?source=pwa",
-    "start_url": "/?source=pwa",
-    "background_color": "#3367D6",
-    "display": "standalone",
-    "scope": "/",
-    "theme_color": "#3367D6",
-    "shortcuts": [
-      {
-        "name": "What is the latest news?",
-        "cli":{
-          "usage":  "helloworld <type> [options]",
-          "example": "helloworld news",
-          "args":{
-            "--latest": {type:"string"}
-          }
-        },
-        "short_name": "Today",
-        "description": "View weather information for today",
-        "url": "/today?source=pwa",
-        "icons": [{ "src": "/images/today.png", "sizes": "192x192" }]
-      }
-    ],
-    "description": "Hello world information",
-    "screenshots": [
-      {
-        "src": "/images/screenshot1.png",
-        "type": "image/png",
-        "sizes": "540x720",
-        "form_factor": "narrow"
-      }
-    ],
-    "help":`
-Helloworld application 
-
-This is a help file which describes the application.
-It will be rendered thru troika text, and will contain
-headers based on non-punctualized lines separated by linebreaks,
-in above's case "\nHelloworld application\n" will qualify as header.
-    `
-  }
-
-});
-

app/xrfragments.js

@@ -15,6 +15,13 @@ AFRAME.registerComponent('xrfragments', {
     // requires are loaded
     ready: function(e){
       this.el.setAttribute("xrf","https://coderofsalvation.github.io/xrsh-media/assets/background.glb")
+
+      let ARbutton = document.querySelector('.a-enter-ar-button')
+      if( ARbutton ){  
+        ARbutton.addEventListener('click', () => {
+          AFRAME.XRF.reset() 
+        })
+      }
     },
 
     launcher:  function(){

com/app.js

@@ -5,6 +5,8 @@ AFRAME.app         = new Proxy({
 
   order:0,
 
+  components: {},       // component-strings in this array are automatically
+                        // added to each app
   add(component, entity){
     // categorize by component to prevent similar apps loading duplicate dependencies simultaniously
     this[component] = this[component] || []
@@ -34,7 +36,7 @@ AFRAME.app         = new Proxy({
  * This is the abstract 'app' component
  */
 
-AFRAME.registerComponent('app', {
+appComponent = {
   schema:{
     "uri":{ type:"string"}
   },
@@ -43,7 +45,11 @@ AFRAME.registerComponent('app', {
     "app:ready": function(){
       let {id,component,type} = this.parseAppURI(this.data.uri)
       AFRAME.app[component].map( (app) => {
-        if( !app.el.getAttribute(component) ) app.el.setAttribute(component,app.data)
+        if( !app.el.getAttribute(component) ){
+          if( AFRAME.components[ component ] ){
+            app.el.setAttribute(component,app.data)
+          }else console.warn(`${component} was not fully downloaded yet (${app.data.uri})`)
+        }
       })
     },
     "requires:ready": function(){
@@ -115,7 +121,10 @@ AFRAME.registerComponent('app', {
     })
   }
 
-})
+}
+
+AFRAME.registerComponent('app', appComponent)
+AFRAME.registerComponent('com', appComponent)
 
 /*
  * Here are monkeypatched AFRAME component prototype functions
@@ -151,29 +160,8 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
       overlay.id = "overlay"
       document.body.appendChild(overlay)
       document.querySelector("a-scene").setAttribute("webxr","overlayElement:#overlay")
-//      let menu = document.createElement('div')
-//      menu.id = 'iconmenu'
-//      document.body.appendChild(menu)
     }
 
-//    // add menu button
-//    if( this.manifest && this.manifest.icons ){
-//      let btn = document.createElement('button')
-//      btn.app = this
-//      if( this.manifest.icons.length ){
-//        btn.innerHTML = `<img src="${this.manifest.icons[0].src}"/>`
-//      }else btn.innerText = this.manifest.short_name
-//      btn.setAttribute("alt", this.manifest.name )
-//      btn.addEventListener('click', (e) => this.el.emit('launcher',{}) )
-//      document.querySelector("#iconmenu").appendChild(btn)
-//    }
-
-    // reactify components with dom-definition
-    if( this.data.uri && this.dom && !this.el.dom ){
-
-      tasks = {
-
-        createReactiveDOMElement: () => {
     const reactify = (el,aframe) => new Proxy(this.data,{
       get(me,k,v)  { return me[k]
       },
@@ -182,6 +170,13 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
         aframe.emit(k,{el,k,v})
       }
     })
+
+    // reactify components with dom-definition
+    if( this.data.uri && this.dom && !this.el.dom ){
+
+      tasks = {
+
+        createReactiveDOMElement: () => {
           this.el.dom = document.createElement('div')
           this.el.dom.className = this.parseAppURI(this.data.uri).component
           this.el.dom.innerHTML = this.dom.html(this)
@@ -212,6 +207,13 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
           return tasks
         },
 
+        initAutoComponents: () => {
+          for ( let i in AFRAME.app.components ) {
+            this.el.setAttribute( i, AFRAME.app.components[i] )
+          }
+          return tasks
+        },
+
         triggerKeyboardForInputs: () => {
           // https://developer.oculus.com/documentation/web/webxr-keyboard ;
           [...this.el.dom.querySelectorAll('[type=text]')].map( (input) => {
@@ -232,16 +234,24 @@ AFRAME.AComponent.prototype.updateProperties = function(updateProperties){
       .scaleDOMvsXR()
       .triggerKeyboardForInputs()
       .setupListeners()
+      .initAutoComponents()
 
       document.querySelector('#overlay').appendChild(this.el.dom)
       this.el.emit('DOMready',{el: this.el.dom})
 
-    } 
+    }else this.data = reactify( this.el, this.el )
+
     // assign unique app id
     if( !this.el.uid ) this.el.uid = '_'+String(Math.random()).substr(10)
 
-    if( this.requires ) this.require( this.requires, 'requires:ready' )
+    // require coms
-    else this.el.emit('requires:ready')
+    let requires = {}
+    for ( let i in AFRAME.app.components  ) {
+      if( !AFRAME.components[i] ) requires[i] = AFRAME.app.components[i]
+    }
+    if( this.requires ) requires = {...requires, ...this.requires }
+    if( Object.values(requires).length ) this.require( requires, 'requires:ready' )
+    else this.el.emit('requires:ready' )
 
     // mark app as being initialized
     this.isApp  = true

com/control/gaze-touch-to-click.js

@@ -0,0 +1,47 @@
+// gaze + fuse-to-click on mobile VR
+// gaze + tap-to-click on mobile AR
+// also adds 'eye'-tracking (mouseover) functionality to display popovers
+
+AFRAME.registerComponent('gaze-touch-to-click',{
+  schema:{
+    spawn:{type:'boolean',default:false}, 
+  },
+  events:{
+    "fusing": function(e){
+      if( e.detail.mouseEvent ) return // ignore click event
+      console.dir(e)
+
+    }
+  },
+  setGazer: function(state, fuse){
+    if( !AFRAME.utils.device.isMobile() ) return
+    let cam = document.querySelector("[camera]") 
+    if( state ){
+      if( cam.innerHTML.match(/cursor/) ) return; // avoid duplicate calls
+      cam.innerHTML = `<a-entity id="cursor" cursor="fuse: ${fuse ? 'true': 'false'}; fuseTimeout: 1500"
+        animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
+        animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
+        animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
+        raycaster="objects: .ray"
+        visible="true"
+        position="0 0 -1"
+        material="color: #BBBBBB; shader: flat">
+      </a-entity>`
+      cam.querySelector('#cursor').setAttribute("geometry","primitive: ring; radiusInner: 0.02; radiusOuter: 0.03")
+    }else{
+      cam.querySelector('#cursor').removeAttribute("geometry")
+      if( document.querySelector('[cursor]') ) {
+        document.querySelector('[cursor]').setAttribute("visible",false)
+      }
+    }
+  }, 
+  init:function(data){
+    this.setGazer(true);
+
+    document.querySelector("a-scene").addEventListener('exit-vr',  () => this.setGazer(false,false) )
+    document.querySelector("a-scene").addEventListener('enter-vr', () => this.setGazer(true,true) )
+    document.querySelector("a-scene").addEventListener('enter-ar', () => this.setGazer(true,false) )
+    document.querySelector("a-scene").addEventListener('exit-ar',  () => this.setGazer(false,false) )
+
+  }
+});

com/control/no-look-controls-in-xr.js

@@ -0,0 +1,67 @@
+// look-controls turns off autoUpdateMatrix (of player) which 
+// will break repositionining the VR rig (teleporting and other stuff)
+// overriding this below is easier then adding updateMatrixWorld() everywhere else
+// (or rolling your own look-controls and diverting from mainbranch)
+
+AFRAME.registerComponent('patch-look-controls',{
+
+  init: function(){
+    alert("fjo"); //dEventListener('loaded', () => this.patchLookControls() )
+  },
+
+  patchLookControls: function(){
+alert("ja!")
+    let lk = document.querySelector('[look-controls]')
+    if( !lk ) return 
+    lk = lk.components['look-controls']
+    
+    lk.onEnterVR = function () {
+      var sceneEl = this.el.sceneEl;
+      if (!sceneEl.checkHeadsetConnected()) { return; }
+      this.saveCameraPose();
+      this.el.object3D.position.set(0, 0, 0);
+      this.el.object3D.rotation.set(0, 0, 0);
+      if (sceneEl.hasWebXR) {
+       // this.el.object3D.matrixAutoUpdate = false;
+        this.el.object3D.updateMatrix();
+      }
+    }
+
+    /**
+     * Restore the pose.
+     */
+    lk.onExitVR = function () {
+      if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
+      this.restoreCameraPose();
+      this.previousHMDPosition.set(0, 0, 0);
+      this.el.object3D.matrixAutoUpdate = true;
+    }
+
+    // it also needs to apply the offset (in case the #rot was used in URLS)
+
+    lk.updateOrientation = function () {
+      var object3D = this.el.object3D;
+      var pitchObject = this.pitchObject;
+      var yawObject = this.yawObject;
+      var sceneEl = this.el.sceneEl;
+
+      // In VR or AR mode, THREE is in charge of updating the camera pose.
+      if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
+        // With WebXR THREE applies headset pose to the object3D internally.
+        return;
+      }
+
+      this.updateMagicWindowOrientation();
+
+      let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
+      let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0 
+
+      // On mobile, do camera rotation with touch events and sensors.
+      object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
+      object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
+      object3D.rotation.z = this.magicWindowDeltaEuler.z;
+      object3D.matrixAutoUpdate = true
+    }
+
+  }
+})

com/control/patch-look-controls.js

@@ -0,0 +1,65 @@
+// look-controls turns off autoUpdateMatrix (of player) which 
+// will break repositionining the VR rig (teleporting and other stuff)
+// overriding this below is easier then adding updateMatrixWorld() everywhere else
+// (or rolling your own look-controls and diverting from mainbranch)
+
+
+// this component will re-attach a patched look-controls
+AFRAME.registerComponent('patch-look-controls',{
+
+  init: function(){
+    let scene = AFRAME.scenes[0]
+    let el    = document.querySelector('[look-controls]')
+    el.removeAttribute("look-controls")
+
+    AFRAME.components['look-controls'].Component.prototype.onEnterVR = function () {
+      var sceneEl = this.el.sceneEl;
+      if (!sceneEl.checkHeadsetConnected()) { return; }
+      this.saveCameraPose();
+      this.el.object3D.position.set(0, 0, 0);
+      this.el.object3D.rotation.set(0, 0, 0);
+      if (sceneEl.hasWebXR) {
+       // this.el.object3D.matrixAutoUpdate = false;
+        this.el.object3D.updateMatrix();
+      }
+    }
+
+    /**
+     * Restore the pose.
+     */
+    AFRAME.components['look-controls'].Component.prototype.onExitVR = function () {
+      if (!this.el.sceneEl.checkHeadsetConnected()) { return; }
+      this.restoreCameraPose();
+      this.previousHMDPosition.set(0, 0, 0);
+      this.el.object3D.matrixAutoUpdate = true;
+    }
+
+    // it also needs to apply the offset (in case the #rot was used in URLS)
+
+    AFRAME.components['look-controls'].Component.prototype.updateOrientation = function () {
+      var object3D = this.el.object3D;
+      var pitchObject = this.pitchObject;
+      var yawObject = this.yawObject;
+      var sceneEl = this.el.sceneEl;
+
+      // In VR or AR mode, THREE is in charge of updating the camera pose.
+      if ((sceneEl.is('vr-mode') || sceneEl.is('ar-mode')) && sceneEl.checkHeadsetConnected()) {
+        // With WebXR THREE applies headset pose to the object3D internally.
+        return;
+      }
+
+      this.updateMagicWindowOrientation();
+
+      let offsetX = object3D.rotation.offset ? object3D.rotation.offset.x : 0
+      let offsetY = object3D.rotation.offset ? object3D.rotation.offset.y : 0 
+
+      // On mobile, do camera rotation with touch events and sensors.
+      object3D.rotation.x = this.magicWindowDeltaEuler.x + offsetX + pitchObject.rotation.x;
+      object3D.rotation.y = this.magicWindowDeltaEuler.y + offsetY + yawObject.rotation.y;
+      object3D.rotation.z = this.magicWindowDeltaEuler.z;
+      object3D.matrixAutoUpdate = true
+    }
+
+    el.setAttribute('look-controls','')
+  }
+})

com/control/pinch-to-teleport.js

@@ -0,0 +1,27 @@
+// poor man's way to move forward using hand gesture pinch
+
+window.AFRAME.registerComponent('pinch-to-teleport', {
+  schema:{
+    rig: {type: "selector"}
+  }, 
+  init: function(){
+    this.el.addEventListener("pinchended", () => {
+      // get the cameras world direction
+      let direction = new THREE.Vector3()
+      this.el.sceneEl.camera.getWorldDirection(direction);
+      // multiply the direction by a "speed" factor
+      direction.multiplyScalar(0.4)
+      // get the current position
+      var pos = player.getAttribute("position")
+      // add the direction vector
+      pos.x += direction.x 
+      pos.z += direction.z
+      // set the new position
+      this.data.rig.setAttribute("position", pos);
+      // !!! NOTE - it would be more efficient to do the
+      // position change on the players THREE.Object:
+      // `player.object3D.position.add(direction)`
+      // but it would break "getAttribute("position")
+    })
+  }, 
+})

com/control/pressable.js

@@ -0,0 +1,72 @@
+// this makes WebXR hand controls able to click things (by touching it)
+
+AFRAME.registerComponent('pressable', {
+    schema: {
+        pressDistance: {
+            default: 0.01
+        }
+    },
+    init: function() {
+        this.worldPosition = new THREE.Vector3();
+        this.fingerWorldPosition = new THREE.Vector3();
+        this.raycaster = new THREE.Raycaster()
+        this.handEls = document.querySelectorAll('[hand-tracking-controls]');
+        this.pressed = false;
+        this.distance = -1
+        // we throttle by distance, to support scenes with loads of clickable objects (far away)
+        this.tick = this.throttleByDistance( () => this.detectPress() )
+    },
+    throttleByDistance: function(f){
+        return function(){
+           if( this.distance < 0 ) return f() // first call
+           if( !f.tid ){
+             let x = this.distance
+             let y = x*(x*0.05)*1000 // parabolic curve
+             f.tid = setTimeout( function(){
+               f.tid = null
+               f()
+             }, y )
+           }
+        }
+    },
+    detectPress: function(){
+        var handEls = this.handEls;
+        var handEl;
+        let minDistance = 5
+
+        // compensate for xrf-get AFRAME component (which references non-reparented buffergeometries from the 3D model)
+        let object3D = this.el.object3D.child || this.el.object3D
+
+        for (var i = 0; i < handEls.length; i++) {
+            handEl = handEls[i];
+            let indexTipPosition  = handEl.components['hand-tracking-controls'].indexTipPosition
+            // Apply the relative position to the parent's world position 
+            handEl.object3D.updateMatrixWorld();
+            handEl.object3D.getWorldPosition( this.fingerWorldPosition )
+            this.fingerWorldPosition.add( indexTipPosition )
+
+            this.raycaster.far = this.data.pressDistance
+            // Create a direction vector (doesnt matter because it is supershort for 'touch' purposes)
+            const direction = new THREE.Vector3(1.0,0,0);
+            this.raycaster.set(this.fingerWorldPosition, direction)
+            intersects = this.raycaster.intersectObjects([object3D],true)
+
+            object3D.getWorldPosition(this.worldPosition)
+      
+            distance    = this.fingerWorldPosition.distanceTo(this.worldPosition)
+            minDistance = distance < minDistance ? distance : minDistance 
+
+            if (intersects.length ){
+              if( !this.pressed ){
+                this.el.emit('pressedstarted');
+                this.el.emit('click');
+                this.pressed = setTimeout( () => {
+                  this.el.emit('pressedended');
+                  this.pressed = null 
+                },300)
+              }
+            }
+        }
+        this.distance = minDistance
+    }
+});

com/control/wearable.js

@@ -0,0 +1,26 @@
+window.AFRAME.registerComponent('xrf-wear', {
+  schema:{
+    el: {type:"selector"}, 
+    position: {type:"vec3"}, 
+    rotation: {type:"vec3"} 
+  }, 
+  init: function(){
+    $('a-scene').addEventListener('enter-vr', (e) => this.wear(e) )
+    $('a-scene').addEventListener('exit-vr',  (e) => this.unwear(e) )
+  }, 
+  wear: function(){
+    if( !this.wearable ){
+      let d = this.data
+      this.wearable = new THREE.Group()
+      this.el.object3D.children.map( (c) => this.wearable.add(c) )
+      this.wearable.position.set( d.position.x,  d.position.y,  d.position.z)
+      this.wearable.rotation.set( d.rotation.x,  d.rotation.y,  d.rotation.z)
+    }
+    this.data.el.object3D.add(this.wearable)
+  }, 
+  unwear: function(){
+    this.data.el.remove(this.wearable)
+    this.wearable.children.map( (c) => this.el.object3D.add(c) )
+    delete this.wearable
+  }
+})