AFRAME的位置远离相机

Question

跟随这个问题

AFRAME屏幕到达世界位置

我可以得到向量的位置，但它似乎非常靠近相机，如何使它离相机更近100px？

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()

我尝试将鼠标等中的值相乘并将z访问设置为更远，但这似乎没有任何区别

Answer 1

如果您想要一个一致的z，也许您可​​以在相机的前面放置一个不可见的平面（比尝试从屏幕到整个世界计算要容易一些）。

单击平面后，可以使用相交点：

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

根据文档中的示例：

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

这是飞机，其中visible设置为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>