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

Question

我创建了一个带有要拖动的对象的a-scene。最终的目的正是aframe-单击-拖动组件所做的工作。不幸的是，这个组件与A帧的最后一个版本不兼容.

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

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

我使用帧-鼠标-光标-组件来获取拖放对象上的mouseenter和mouseleave事件，并检测鼠标位置允许用户选择对象的时间。

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

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

这样，我就可以很容易地得到鼠标拖动的位置。但我不知道如何将鼠标在客户端上的位置转换为虚拟现实中的位置(仅限于2D计划，以使其成为可能)。

我通过使用来自a-camera中间的光标的扫描程序解决了这个问题，但是我想用mouse-cursor拖动对象，而这个组件没有一个扫描程序。

我还试图使用一些数学将鼠标坐标转换为相对于相机的坐标集，但没有成功(主要是因为屏幕大小可能会有所不同)。

有什么解决办法？我想更新点击拖动或鼠标光标，但我不知道THREE.js.

Answer 1

有关示例，请参阅https://github.com/mayognaise/aframe-mouse-cursor-component、https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js或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);