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

Question

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

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

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

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

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

这样，我就可以轻松获取拖动过程中鼠标的位置。但我不知道如何将客户端上鼠标的位置转换为虚拟现实中的位置(仅限于 2D 计划才能实现)。

我通过使用来自相机中间的光标的光线转换器解决了这个问题，但我想用鼠标光标拖动对象，并且该组件没有光线转换器。

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

有哪些可用的解决方案？我想更新点击拖动或鼠标光标，但我不了解 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);