> 웹 프론트엔드 > JS 튜토리얼 > 마우스 클릭의 3차원 좌표를 얻기 위한 Three.js 샘플 코드에 대한 자세한 설명

마우스 클릭의 3차원 좌표를 얻기 위한 Three.js 샘플 코드에 대한 자세한 설명

黄舟
풀어 주다: 2017-03-25 14:28:30
원래의
2581명이 탐색했습니다.

이 글에서는 주로 마우스 클릭의 3차원 좌표를 얻기 위한 Three.js 샘플 코드를 소개합니다. 특정 참조 가치가 있으며 관심 있는 친구가 참조할 수 있습니다.

업무상 필요한데 three.js에 대해 아는 것도 없고, 인터넷에 정보도 거의 없어서 좌표를 구해달라고 했더니 정말 큰일이네요. 어쨌든 그것이 마침내 실현됐다.

이제 마우스 클릭의 3차원 좌표를 얻으려면 카메라객체와 장면이 이미 있다고 생각합니다. 먼저 이 두 개체를 살펴보세요. 여기서는 원리는 제쳐두고 3차원 좌표를 구하는 방법에 대해서 주로 이야기하겠습니다. 위 코드:

function onDocumentMouseDown( event ) {
  event.preventDefault();
  var vector = new THREE.Vector3();//三维坐标对象
  vector.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1,
    0.5 );
  vector.unproject( camera );
  var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
  var intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    var selected = intersects[0];//取第一个物体
    console.log("x坐标:"+selected.point.x);
    console.log("y坐标:"+selected.point.y);
    console.log("z坐标:"+selected.point.z);
  }
로그인 후 복사

제가 이해한 바는 마우스를 클릭하면 화면이 2차원 좌표를 수신하여 이 2차원 좌표가 카메라에 연결되어 보는 각도 방향으로 확장되어 이 광선은 장면의 객체와 교차하고 교차하는 모든 객체를 수신합니다. 첫 번째 객체는 카메라에 가장 가까운 객체이고 마지막 객체는 카메라에서 가장 먼 객체입니다. 일반적으로 교차하는 첫 번째 객체를 마우스로 클릭한 객체로 사용합니다.


위 내용은 마우스 클릭의 3차원 좌표를 얻기 위한 Three.js 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿