three.js 장면에서 클릭 이벤트를 처리하는 방법?

저는 평면 지오메트리로 월드 맵 레이어가 있습니다. 이제 다른 부분 (예 : 대륙 또는 국가)에서 클릭 이벤트를 처리하려고합니다. 특정 부분 (정보 또는 비디오 재생 팝업 또는 링크가있는 이미지 데이터 팝업 등)에서 팝업 이벤트를 처리하는 방법three.js 장면에서 클릭 이벤트를 처리하는 방법?

여기에 이미 장면 설정이있는 fiddle이 있습니다.

var camera, scene, renderer; 
var geometry, material, mesh; 

window.addEventListener("click", onClick, false); 


function onClick() { 
    alert("Replace me with code to add an object!"); 
} 

var init = function() { 

    renderer = new THREE.CanvasRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

    camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 1, 1000); 
    camera.position.z = 500; 

    scene = new THREE.Scene(); 

geometry = new THREE.CubeGeometry(200, 200, 200); 
material = new THREE.MeshBasicMaterial({ 
       color: 0x000000, 
       wireframe: true, 
       wireframeLinewidth: 2 
      }); 

mesh = new THREE.Mesh(geometry, material); 
scene.add(mesh); 

} 

var animate = function() { 

    requestAnimationFrame(animate); 

    mesh.rotation.x = Date.now() * 0.0005; 
    mesh.rotation.y = Date.now() * 0.001; 

    renderer.render(scene, camera); 

} 

init(); 
animate();

클릭 이벤트가 전체 장면에 적용, 그 예에 여러 개의 큐브를 생성 한이 모든 부분에 대해 동일한 클릭 이벤트를 보여주고 있음을 클릭했을 때.

출처

2016-08-02 mahadev s

당신이 묻는 것은 너무 복잡합니다. 당신은 그것을 분해해야합니다. 해결하려는 첫 번째 문제는 클릭 한 개체를 찾는 것입니다.

당신은 raycasting 또는 GPU 따기를 할 수 있습니다. 당신이 초보자처럼 들리므로 나는 당신이 레이캐스팅으로 시작할 것을 제안합니다.

출처

2016-08-02 11:31:16 Hasan

@mahadevs 표면과 월드 맵이 텍스처로 만 나타납니다. 이런 식으로 상호 작용을 성취 할 수는 없습니다. 상호 작용이 필요한 각 파트에 대한 도형을 만들고, 내가 보낸 자습서에서 raytest를 수행하십시오. – Hasan

물론 시도해 보겠습니다. 자습서의 도움으로 –

, 나는 raycasting을 사용하여 클릭 이벤트를 만들었습니다. 하지만 문제는 드래그 앤 클릭 이벤트와 충돌이 있다는 것입니다. 패닝에는 onMouseDown 이벤트 (orbitcontrols)를 사용하고 클릭 이벤트에는 onDocumentMouseDown (event)을 사용합니다. 테스트 [link] (http://arkatest.com/testing/working/test1.html) –

지도에서 클릭이 발생한 위치를 파악하기 위해 수행해야 할 몇 가지 작업이 있습니다.이 작업은 한 가지 방법 일 뿐이며 GPU-picking을 사용하는 것이 더 쉽습니다.

클릭이 발생할 때 커서 아래에있는 개체에 대한 정보를 얻으려면 three.js가 제공하는 raycaster를 사용하십시오. (docs/example)
raycaster의 결과에서 교차점에 대해 uv-coordinates이 표시됩니다 (기본적으로지도 텍스처에서 클릭이 발생한 곳).
이제 지리적 기능을 이러한 UV 좌표와 관련된 값으로 저장하거나 UV 값을 작업 할 지리적 형식 (WGS84 또는 위도/경도)으로 변환해야 할 수 있습니다. 이를 위해서는지도를 만드는 데 사용 된 투영 유형 (아마도 mercator-projection)을 알아야합니다. 이러한 종류의 변환에 사용할 수있는 라이브러리가 많이 있습니다.

이제 월드 맵에서 클릭이 발생한 지점을 확인 했으므로 지형지 물에 대해 테스트 할 수 있습니다. 대륙을 예로 들어 봅시다. 각 대륙마다 클릭 좌표에 사용하는 것과 동일한 좌표계에서 다각형을 정의해야합니다. 그런 다음 'polygon에서 가리킨다'(here's an implementation) 테스트를 통해 클릭 한 위치가 다각형 안에 있는지 확인할 수 있습니다.

출처

2016-08-02 12:34:08

three.js 장면에서 클릭 이벤트를 처리하는 방법?

답변

관련 문제