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

이 글에서는 주로 마우스 클릭의 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!