화면 좌표를 장면 좌표로 변환하는 방법

Question

끌어 올 개체가있는 a-scene을 만들었습니다. 최종 목적은 정확하게 aframe-click-drag-component이하는 것입니다. 아쉽게도이 구성 요소는 A- 프레임의 마지막 버전과 호환되지 않습니다.

사용자 지정 구성 요소를 만들었습니다.

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

나는 마우스의 위치가 그 대상을 사용자가 선택할 수있는 경우 드래그 객체에 mouseenter 및 mouseleave 이벤트를 얻고, 감지 할 수 있도록 aframe-mouse-cursor-component를 사용합니다.

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 추가 드래그하는 동안 마우스의 위치를 ​​쉽게 얻을 수 있습니다. 그러나 클라이언트에서 마우스의 위치를 ​​Virtual Reality (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);