如何将屏幕坐标转换为场景坐标

Question

我创建了一个 a-scene，其中包含一些要拖动的对象。最终目的正是 aframe-click-drag-component 所做的。不幸的是，该组件与最新版本的 A-Frame 不兼容。

我创建了一个自定义组件。

AFRAME.registerComponent('draggable', {
    init: function () {
        /* Some code */
    }
});

我使用 aframe-mouse-cursor-component 来获取可拖动对象上的 mouseenter 和 mouseleave 事件，并检测何时鼠标位置允许用户 select 物体。

我在 document.body 上添加了一个 EventListener 以了解何时开始拖动：

document.body.addEventListener('mousedown', function (e) {
    // start dragging
});

我不断更新一个全局变量来在 mousemove 发生时更新鼠标位置：

document.addEventListener('DOMContentLoaded', function () {
    document.body.addEventListener('mousemove', function (e) {
        window.mouseX = e.clientX;
        window.mouseY = e.clientY;
    });
});

这样我就可以很方便的得到鼠标在拖动过程中的位置了。但是我不知道如何将鼠标在客户端上的位置转换为虚拟现实中的位置（仅限于二维平面图才能实现）。

我通过使用来自 a-camera 中间光标的光线投射器解决了这个问题，但是我想用 mouse-cursor 拖动对象，并且这个组件没有光线投射器。

我还尝试使用一些数学方法将鼠标坐标转换为相对于相机的坐标集，但没有成功（主要是因为屏幕尺寸可能会有所不同）。

有哪些解决方案？我想更新点击拖动或鼠标光标，但我不知道 THREE.js。

Answer 1

有关示例，请参阅 https://github.com/mayognaise/aframe-mouse-cursor-component or https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js or https://www.npmjs.com/package/aframe-click-drag-component

主要代码块如下：

    canvas.addEventListener( 'mousemove', function () {

      var mouse = new THREE.Vector2();

      var rect = canvas.getBoundingClientRect();

      mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
      mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;

      raycaster.setFromCamera( mouse, camera );
    }, false);

如何将屏幕坐标转换为场景坐标

How to convert screen coordinates to scene coordinates

javascript

drag-and-drop

virtual-reality

aframe