aframe - aframe - 作るデスクトップでマウスをたどる

Question

更新: このプラグインによって解決された問題https://github.com/mayognaise/aframe-mouse-cursor-component

ここで aframe を初めて使用します。ユーザーがデスクトップブラウザのオブジェクトを「クリック」できるようにするシーンを作成していますが、既存のルックコントロールコードをいじったり、新しいコンポーネントを作成したりするのに多大な時間を費やしたくありませんでした。https://stackoverflow.com/a/36071100/5132437のコードを作成し、マウスの動きに合わせての位置を作ろうとするソリューションを考案しました:

// code for moving the cursor
var mouse = {
  x: 0,
  y: 0
};
var camera = document.querySelector('#camera').components.camera.camera;
console.log(camera.position);

function onMouseMove(event) {

  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  var vector = new THREE.Vector3(mouse.x, mouse.y, -1);
  vector.unproject(camera);
  var dir = vector.sub(camera.position).normalize();
  var distance = -camera.position.z / dir.z;
  var pos = camera.position.clone().add(dir.multiplyScalar(distance));
  positionStr = String(pos.x) + " " + String(pos.y) + " " + String(pos.z);
  document.querySelector('#cursor').setAttribute('position', positionStr);
}

window.addEventListener('mousemove', onMouseMove, false);

ここでの問題は、マウスが移動するたびにカーソルが位置 (0,0,0) に消えることです。a-frame で正しいカメラ データを取得する際に問題がある可能性があることは理解していますが、よくわかりません。

完全なjsFiddleはこちら

どんな助けでもいただければ幸いです