aframe - 使 <a-cursor> 在桌面上跟随鼠标

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）。我知道在帧中获取正确的相机数据可能存在问题，但我不确定。

Full jsFiddle here

任何帮助将不胜感激

Answer 1

解决者：https://github.com/mayognaise/aframe-mouse-cursor-component

---

一旦https://github.com/aframevr/aframe/pull/1196 登陆，我将致力于此。让光标跟随鼠标，单击会将光线投射到场景中。

你不会使用<a-cursor>，但你会做类似http://threejs.org/examples/#webgl_interactive_cubes的事情