ThreeJS - XZ 평면으로 프로젝트/레이 캐스트 마우스 클릭

ThreeJS 장면 내에서 3D지도로 오프라인 라우팅을 구현하려고합니다. 사용자가 점을 클릭 한 다음이 점으로 큐브를 탐색하길 원합니다. 탐색은 올바르게 작동하지만 클릭 지점이 정확하지 않습니다. 평면 맵은 Y 축이 위를 향한 XZ 좌표의 평면입니다. 장면에서 나는 궤도를 도는 때 카메라의 위치 인수를 변경하는 궤도 제어를 가지고있어, 따라서 내가하는 방식으로 광선 캐스팅이 정확하지 않습니다. 나는 어떤 궤도 상태에서도 올바른 XZ 좌표를 얻을 필요가있다. 나는 3D에서 전통적인 레이 캐스팅을위한 정확한 좌표를 얻고 있지만 이것이 필요한 것은 아니라고 말했다. raycaster의 ThreeJS 문서에서 기본 방법을 시도했는데 this question에서 대답하고 Vector3.unproject()을 사용하여 마우스를 클릭하지 않은 것이 성공하지 못했습니다.ThreeJS - XZ 평면으로 프로젝트/레이 캐스트 마우스 클릭

Here은 무엇을 의미하는지 설명하기 위해 jsfiddle입니다. 몇 가지 중요한 설명이 있습니다.

출처

2017-10-12 Arek Areknawo

당신은 당신이 세계에서 3 차원 점을 얻기 위해 그들에게 당신이 적절한 XY를 얻을 것이라고 생각 전통적인 레이 캐스트를 unprojet 않는 경우 공간. 궤도 상태에 대한 변환 행렬을 유지합니까? –

매트릭스를 사용하지 않았으므로 이것이 단서입니다. 나는 궤도 제어에서 오프셋 된 벡터가 적용된 쿼 테리 온이 타겟 벡터에 추가된다는 것을 안다. 이것은 3D 좌표에 대해서는 잘 작동하지만 x 및 z를 선택할 수는 없습니다. 나는 거기에 약간의 변형을 적용해야한다고 생각하지만, 어떻게해야 할 지 모르겠다. –

당신은 쿼터니온과 오프셋 벡터를 가지고 있다고 생각합니다. –

내 코드에 버그가있을 수 있습니다. 재 작성과 일부 시도에서 교차 평면에서 코도를 얻는 방법이 잘 작동했습니다. 물론 Orbit Controls를 구현했습니다. 이것은 내 'onMouseClick'기능은 지금 모습입니다 :

var mouse = new THREE.Vector2(); 
    var rect = scope.renderer.domElement.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); 
    var intersection = raycaster.intersectObject(plane); 
    //example box for position visualisation 
    box.position.copy(intersection[0].point); 
    box.position.y = 0;

Three.js를 r.87

출처

2017-10-15 18:57:03

ThreeJS - XZ 평면으로 프로젝트/레이 캐스트 마우스 클릭

답변

관련 문제