title: Change parent of component and keep position
body: <p>I am using <a href="https://github.com/jeromeetienne/AR.js" rel="nofollow noreferrer">AR.js</a> and have a sphere positioned in the marker component.</p>
  
  <pre><code>&lt;body style="margin : 0px; overflow: hidden;"&gt;
      &lt;a-scene vr-mode-ui="enabled: false" embedded="" arjs="sourceType: webcam; debugUIEnabled: false;"&gt;
          &lt;a-marker markerhandler id="marker" emitevents="true" cursor="rayOrigin: mouse" preset="hiro"&gt;
              &lt;a-sphere id="sphere" color="green" radius="0.3" position="0 1 0" &gt;&lt;/a-sphere&gt;
          &lt;/a-marker&gt;
          &lt;!-- use this &lt;a-entity camera&gt; to support multiple-markers, otherwise use &lt;a-marker-camera&gt; instead of &lt;/a-marker&gt;--&gt;
          &lt;a-entity camera="" id="camera"&gt;
                  &lt;a-entity geometry="primitive: plane; height: 0.1; width: 0.1" position="0.4 -0.2 -1"
                  material="color: gray; opacity: 0.5"&gt;&lt;/a-entity&gt;
                  &lt;a-entity id="sphere-button" geometry="primitive: plane; height: 0.1; width: 0.1" position="-0.4 -0.2 -1"
                  material="color: green; opacity: 0.5"&gt;&lt;/a-entity&gt;
          &lt;/a-entity&gt;
      &lt;/a-scene&gt;  
    &lt;/body&gt;
  </code></pre>
  
  <p>When <em>#sphere-button</em> is clicked, the sphere should dettach from  
  and  attach to the camera. 
  During the relocation in the DOM, the position should stay the 
  same, but it does not. I tried this:</p>
  
  <pre><code>let v = new THREE.Vector3();
  v.copy(sphere.object3D.position);
  sphere.object3D.localToWorld(v);
  camera.object3D.worldToLocal(v);
  sphere.parentNode.removeChild(entity);
  camera.appendChild(sphere);
  entity.setAttribute('position', v);
  </code></pre>
  
  <p>How do i correctly translate the position between the two parents <strong>a-camera</strong> and <strong>a-marker</strong>?</p>