Question

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

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

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

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

我在EventListener上添加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中间光标的raycaster解决了这个问题，但是我想用mouse-cursor拖动对象，而且这个组件没有raycaster。

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

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

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

1 个答案: