aframe - make <a-cursor> follow mouse on desktop

Question

UPDATE: problem solved by this plugin https://github.com/mayognaise/aframe-mouse-cursor-component

New to aframe here. I am creating a scene where I want the user to be able to "click" on objects on desktop browser and I did not want to go great lengths to mess with the existing look-controls code or create a new component, so I looked at code from https://stackoverflow.com/a/36071100/5132437 and devised a solution where I try to make the position of the follow the movement of mouse:

// 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);

The problem here is that every time the mouse moves the cursor disappears to position (0,0,0). I understand there might be a problem with getting the correct camera data in a-frame but I'm not sure.

Full jsFiddle here

Any help would be appreciated

As mentioned in the plugin-documentation, this feature is now available in A-Frame v0.6.1 by setting <a-scene cursor="rayOrigin: mouse">. — klaasman

ngokevin ngokevin · Accepted Answer · 2016-04-05T19:07:09

Solved by: https://github.com/mayognaise/aframe-mouse-cursor-component

I will be working on exactly this once https://github.com/aframevr/aframe/pull/1196 lands. Have a cursor that follows a mouse, and a click will project a ray into the scene.

You wouldn't use <a-cursor> but you'd do something like http://threejs.org/examples/#webgl_interactive_cubes

aframe - make <a-cursor> follow mouse on desktop

1 Answers