AFRAME position far away from camera

Question

Following this question

I can get the position of the vector, but it seems to be very close to camera, how do I get it around 100px further away from the camera?

let mouse = new three.Vector2()
let camera = AFRAME.scenes[0].camera
let rect = document.querySelector('body').getBoundingClientRect()
mouse.x = ( (e.clientX - rect.left) / rect.width ) * 2 - 1
mouse.y = - ( (e.clientY - rect.top) / rect.height ) * 2 + 1
let vector = new three.Vector3( mouse.x, mouse.y, -1 ).unproject( camera )
this.el.setAttribute('vector',vector)
this.data.onVector(this.data.sceneId,vector)
this._removeListener()

I tried multiplying the values from mouse etc and setting the z access to further away, but that doesn't seem to make any difference

Noam Almosnino Noam Almosnino · Accepted Answer · 2018-01-26T07:43:39

If you want a consistent z, perhaps you could place an invisible plane in front of the camera (it's a bit easier than trying to calculate from screen to world).

When the plane is clicked you could use the intersection point:

https://glitch.com/edit/#!/a-frame-intersection-point

Based on an example from the docs:

AFRAME.registerComponent('cursor-listener', {
  init: function () {
    this.el.addEventListener('mouseup', (evt) => {
      let boxEl = document.createElement('a-box');
      boxEl.setAttribute('position', evt.detail.intersection.point);
      boxEl.setAttribute('color', 'red');
      this.el.sceneEl.appendChild(boxEl); 
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

Here you have the plane, with visible set to false:

<a-scene>
  <a-entity id="camera" camera="userHeight: 1.6" wasd-controls look-controls cursor="rayOrigin: mouse"></a-entity>
  <a-plane id="plane" cursor-listener class="collidable" width="100" height="100" position="0 0 -4" material="visible: false;"></a-plane>
  <a-entity position="-1 0.5 -5">
    <a-box class="collidable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
  </a-entity>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

AFRAME position far away from camera

1 Answers