Question

关注此问题

我可以得到矢量的位置，但它似乎非常接近相机，我怎么能在距离相机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);
    });
  }
});

这里有平面，可见设置为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位置远离相机

1 个答案: