Canvas 调试threejs raycaster鼠标坐标
我制作了一个光线投射器,使画布内的某个对象相交。如果canvas在窗口浏览器中是单独的,那么效果很好,但是如果我将canvas放在其他GUI中,那么它就不会相交,因此canvas的位置是不同的。我认为这是鼠标坐标的问题。如何调试它?如果我知道鼠标坐标,我如何理解画布的坐标Canvas 调试threejs raycaster鼠标坐标,canvas,three.js,Canvas,Three.js,我制作了一个光线投射器,使画布内的某个对象相交。如果canvas在窗口浏览器中是单独的,那么效果很好,但是如果我将canvas放在其他GUI中,那么它就不会相交,因此canvas的位置是不同的。我认为这是鼠标坐标的问题。如何调试它?如果我知道鼠标坐标,我如何理解画布的坐标 function getPosition(event) { // TODO: add the border of the canvas var x = new Number(); var y = new Number();
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};
}
您需要做的是:
// 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));
你使用<代码> MouthValue<代码>求交集。
如果这个或任何答案已经解决了你的问题,请考虑通过点击复选标记来接受它。这向更广泛的社区表明,你已经找到了一个解决方案,并给回答者和你自己带来了一些声誉。没有义务这样做。