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

【问题标题】：How to convert screen coordinates to scene coordinates如何将屏幕坐标转换为场景坐标
【发布时间】：2025-12-24 11:45:07
【问题描述】：

我创建了一个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 计划以使其成为可能）。

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

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

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

【问题讨论】：

你有这个工作的例子吗？我正在尝试拖动但我真的很挣扎。
我有一段时间没有接触 A-frame，现在......但是@ngokevin 在下面发布了 3 个很好的例子。
那些没有帮助，因为我试图用手势移动东西，但我最终想通了，谢谢

标签： javascript drag-and-drop virtual-reality aframe

【解决方案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);

【讨论】：