將2D鼠標座標轉換爲ThreeJS中的世界XZ座標

Question

我需要將鼠標屏幕座標轉換爲XZ平面上的ThreeJS世界座標。

我發現這個工作代碼到鼠標的位置，以XY世界座標轉換，但我不知道如何修改它來獲得XZ座標：

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 dir = vector.sub(camera.position).normalize(); 
var distance = - camera.position.z/dir.z; 
var position = camera.position.clone().add(dir.multiplyScalar(distance)); 
console.log("x: " + position.x + " y: " + position.y); 

Answer 1

通過修改從這裏找到代碼明白了： http://www.osd.net/blog/web-development/3d-board-game-in-a-browser-using-webgl-and-three-js-part-3/

   var x, y; 
      // 
      if (event.offsetX !== undefined) { 
       x = event.offsetX; 
       y = event.offsetY; 
      } else { 
       x = event.layerX; 
       y = event.layerY; 
      } 

      var pos = new THREE.Vector3(0, 0, 0); 
      var pMouse = new THREE.Vector3(
       (event.clientX/window.innerWidth) * 2 - 1, 
       - (event.clientY/window.innerHeight) * 2 + 1, 
       1); 
      // 
      var projector = new THREE.Projector(); 
      projector.unprojectVector(pMouse, camera); 

      var cam = camera.position; 
      var m = pMouse.y/(pMouse.y - cam.y); 

      pos.x = pMouse.x + (cam.x - pMouse.x) * m; 
      pos.z = pMouse.z + (cam.z - pMouse.z) * m;