Javascript 当带有渲染器的DOM元素不在屏幕顶部时移动的场景坐标

我遇到了一个问题，在视图中的angular custom指令中有一个3.js场景。A在顶部，我有一个导航栏，它总是在那里提供导航和wiews之间的切换（还没有异常）。假设我设置了一个简单的场景（和以前一样多次，但不是在角度下），我在场景中放置了一个简单的立方体，设置了相机旋转和其他基本的东西。当我试图用鼠标按下那个物体时，问题就开始了（raycaster工作得很好），但我的坐标系似乎是从页面顶部开始的（或者我没有任何其他解释）。为了更好地理解，我在这里有一个屏幕（）。看起来好像物体的真实网格被向上移动了一点，它的图像被渲染为如图所示。我必须承认，我在谷歌上搜索了很多，但是关于angularjs+three.js的内容并不多

渲染器设置：

 renderer.setSize(window.innerWidth, window.innerHeight);
    element[0].appendChild(renderer.domElement);

          var vector = new THREE.Vector3();
      vector.set( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
      vector.unproject( camera );

      raycaster.ray.set( camera.position, vector.sub( camera.position ).normalize());

其中元素[0]是我的自定义指令

<input-dir> <canvas> </input-dir>

---

谢谢

我认为问题在于鼠标坐标是相对于浏览器显示的视口的。坐标（0，0）位于浏览器视口的左上角，您希望它位于渲染THREE.js场景的画布的左上角。由于您有一个导航栏，因此在获取鼠标坐标时，必须考虑到屏幕顶部的偏移量

要获取从画布到视口边缘的偏移，可以使用canvas.getBoundingClientRect（）函数。这将返回一个具有画布大小及其相对于视口位置的对象

要获取由THREE.js渲染器创建的画布，可以使用renderer.doElement。或者，您可以在程序开始时通过向渲染器传递画布将自己的画布指定给渲染器

var canvas = document.getElementById("canvasID");
renderer = new THREE.WebGLRenderer({ canvas: canvas });

然后用这个来得到偏移量

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
      x: evt.clientX - rect.left, // left offset
      y: evt.clientY - rect.top //top offset
    };
}

可以使用此函数获取鼠标相对于画布的位置坐标

希望这能解决问题

另外，我本想让你发布你现在用来获取鼠标位置的代码，但我无法对你的问题发表评论。在询问有关堆栈溢出的问题时，最好提供您遇到问题的代码

编辑： 您希望在使用鼠标坐标之前获得鼠标坐标，换句话说：

var vector = new THREE.Vector3();
var mousePos = getMousePos(canvas, event);
vector.set( ( mousePos.x / window.innerWidth ) * 2 - 1,
 - ( mousePos.y / window.innerHeight ) * 2 + 1, 0.5 );
vector.unproject( camera );

下一个问题是，如何将画布作为该函数的参数？ 若要尝试此方法是否有效，请尝试将渲染器设置为全局（如果尚未设置）。然后打电话

var mousePos = getMousePos(renderer.domElement, event);

相反。如果可行，您很可能希望将渲染器设置为私有，并以其他方式获取画布（因为使用不必要的全局变量通常是不好的做法）

您可以使用DOM方法获取画布，通过id或其他方式获取画布

---

希望这能奏效

我用源代码编辑了这个问题，我什么时候使用你建议的getMousePos函数？效果很好，有一点我必须将函数的返回设置为

y:rect.top-event.clientY，因为它是负数。无论如何，标记为回答，再次感谢