当带有渲染器的DOM元素不在屏幕顶部时，场景的坐标已移动 [英] Moved coordinates of the scene when DOM element with renderer is not at the top of the screen

问题描述

我遇到了一个问题，在视图中的角度自定义指令中有一个three.js场景。在顶部，我有一个导航栏，该导航栏始终在其中，以提供导航和在wiew之间切换（尚未异常）。可以说我设置了一个简单的场景（之前有很多次，但不在角度之下），我在场景中放置了一个简单的立方体，设置了相机旋转和其他基本功能。当我尝试用鼠标向下击该对象时，问题开始了（raycaster正常工作），但是似乎我的坐标系是从页面顶部开始的（或者我对此没有任何其他解释）。为了更好地理解，我在这里有一个屏幕（ http://prntscr.com/6r6pnu ）。好像对象的真实网格向上移动了一点，其图像如图所示。我必须在Google上搜索很多，但是关于angularjs + three.js

I encountered a problem, where I have a three.js scene in angular custom directive, which is in the view. A the top, I have a navigation bar which is always there to provide navigatin and switching between wiews (nothing abnormal yet). Lets say I set up a simple scene (as many times before, but not under the angular), I put a simple cube in the scene, set up camera rotation and other basic stuff. Problem starts when I try to hit that object on mouse down (raycaster works perfectly) but it seems as my coordinate system started from the top of the page (or I dont have any other explanation for that). For better understanding I have a screen here ( http://prntscr.com/6r6pnu ). It seems as if the real mesh of the object was moved up a little and the image of it rendered as shown at the picture. I must yas I googled a lot but there are not really much about angularjs+three.js

渲染器设置并没有太多了解：

renderer set up:

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

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

where element[0] is my custom directive

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

raycaster设置：

raycaster set up:

          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，0）位于浏览器视口的左上角，并且您希望它位于渲染THREE.js场景的画布的左上角。由于具有导航栏，因此在获取鼠标坐标时必须考虑到屏幕顶部的偏移量。

I think the problem is that the mouse coordinates are relative to the viewport that your browser is showing. coordinate (0, 0) is in the browser viewports top left corner, and you want it to be in the top left corner of the canvas that the THREE.js scene is rendered to. Since you have a navbar, you have to account for that offset to the top of the screen when getting your mouse coordinates.

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

To get the offset from the canvas to the edge of the viewport, you can use the canvas.getBoundingClientRect() function. This will return a object with the size of the canvas, and its position relative to the viewport.

要获取THREE.js渲染器创建的画布，可以使用renderer.domElement。或者，您可以在程序开始时通过将画布传递给画布来将其分配给渲染器。

To get the canvas that is created by the THREE.js renderer, you can use renderer.domElement. Or you can assign your own canvas to the renderer in the beginning of the program by passing it a canvas.

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

然后使用它来获取偏移量。

and then using this on to get the offset.

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

您可以使用此功能获取相对于鼠标位置的坐标帆布。

you can use this function to get the coordinates of the mouse position relative to the canvas.

希望这可以解决问题。

ps。我会要求您发布您现在使用的代码来获取鼠标位置，但是我无法评论您的问题。最好在遇到堆栈溢出问题时提供您遇到问题的代码

ps. i would have asked you to post the code that you are using right now to get the mouse position, but i couldnt comment on your question. it is always good to provide code that you are having problem with when asking a question on stack overflow

编辑：
您想在鼠标坐标之前您想使用它们，换句话说：

You want to get the mouse coordinates right before you want to use them, in other words:

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

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

next question is, how will you get your canvas as an argument to that function? To try if this works, try making your renderer global (if it is not already). and then call

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

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

instead. If it works, you'll probobly want to make the renderer private and get the canvas some other way instead (because it is usually bad practice to have unnecesary global variables).

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

you can get the canvas with DOM methods, getting it by an id or something.

希望这行得通！

这篇关于当带有渲染器的DOM元素不在屏幕顶部时，场景的坐标已移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！