調試threejs raycaster鼠標座標

Question

我做了一個raycaster來交叉畫布內的一些對象。如果畫布在窗口瀏覽器中是獨立的，但它不能獲得交集，如果我將畫布放在其他GUI中，並且畫布的位置不同。我認爲這是一個與鼠標座標有關的問題。我該如何調試它？如果我知道鼠標座標，我怎麼能理解畫布的座標是什麼？

function getPosition(event) { 
// TODO: add the border of the canvas 
var x = new Number(); 
var y = new Number(); 

if (event.x != undefined && event.y != undefined) { 
     x = event.x; 
     y = event.y; 
} else { 
     // Firefox method to get the position 
     x = event.clientX + document.body.scrollLeft + 
      document.documentElement.scrollLeft; 
     y = event.clientY + document.body.scrollTop + 
      document.documentElement.scrollTop; 
} 

x -= canvas.offsetLeft; 
y -= canvas.offsetTop; 

return {x: x, y: y};  
} 

Answer 1

你需要的是什麼：

// getBoundingClientRect() returns the element's position relative to the browser's visible viewport. 
// clientX/Y returns the mouse position relative to the browser's visible viewport. 
// we then just have to find the difference between the two to get the mouse position in "canvas-space" 

var canvasPosition = renderer.domElement.getBoundingClientRect(); 

var mouseX = event.clientX - canvasPosition.left; 
var mouseY = event.clientY - canvasPosition.top; 

var mouseVector = new THREE.Vector2 (
     2 * (mouseX/window.innerWidth) - 1, 
    1 - 2 * (mouseY/window.innerHeight)); 

，並使用mouseVector的交集。