詳解Three.js取得滑鼠點擊的三維座標的範例程式碼

本篇文章主要介紹了Three.js取得滑鼠點擊的三維座標範例程式碼。具有一定的參考價值，有興趣的夥伴可以參考一下。

由於工作需要，但是對於three.js又是一竅不通，網上的資料又很少，所以上來就讓我獲取坐標，真是一個頭兩個大。好歹最後終於實現了。

既然已經是想要取得滑鼠點擊的三維座標了，相信你camera物件和scene都已經有了，如果不了解的小夥伴，可以先去看一下這兩個對象。這裡主要說一下怎麼取得到三維座標，原理性的東西不提。上碼：

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);
  }

我理解的就是滑鼠點擊的時候螢幕收到的是二維座標，這個二維座標和相機連線，在視角的方向上延伸，形成一條射線，這條射線會和場景中的物體相交，接收這些相交的所有物體，第一個物體就是離相機最近的，最後一個就是離相機最遠的。一般就把第一個相交的物體當作滑鼠點擊的物體。

#

以上是詳解Three.js取得滑鼠點擊的三維座標的範例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！