画面座標をシーン座標に変換する方法

Question

ドラッグするオブジェクトがあるa-sceneを作成しました。最終的な目的はちょうどaframe-click-drag-componentの機能です。残念ながら、このコンポーネントはA-Frameの最新バージョンと互換性がありません。

私はカスタムコンポーネントを作成しました。私はドラッグ可能なオブジェクト上mouseenterとmouseleaveイベントを取得し、マウスの位置は、ユーザーがオブジェクトを選択することができたときに検出することができるようにaframe-mouse-cursor-componentを使用

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

。

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

この方法では、ドラッグを開始したときに

は、私が知っているdocument.bodyにEventListenerを追加しましたドラッグ中にマウスの位置を簡単に取得できます。しかし、クライアント上のマウスの位置をバーチャルリアリティの位置に変換する方法はわかりません（可能にする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);