【问题标题】:Three.js world coordinates from mouse position with Orthographic camera使用正交相机从鼠标位置获取 Three.js 世界坐标
【发布时间】:2014-11-15 09:01:24
【问题描述】:

我知道这个问题已经被问过很多次并得到了回答,但我目前对我所遵循的任何答案都没有运气(主要是这个Mouse / Canvas X, Y to Three.js World X, Y, Z)。

我已经完成了对象选择,我正在使用的代码如下

onMouseMove:function(event)
{
    event.preventDefault();

    var scope       =   Game.GSThree,
        $container  =   $(scope.container.element),
        width       =   $container.width(),
        height      =   $container.height(),
        vector,
        ray,
        intersects;

    scope.mouse.x   =   (event.clientX - scope.container.padding.left) / width * 2 - 1;
    scope.mouse.y   =   - (event.clientY / height) * 2 + 1;
    scope.mouse.z   =   0.5;
    vector          =   new THREE.Vector3(scope.mouse.x , scope.mouse.y , scope.mouse.z);
    ray             =   scope.projector.pickingRay(vector.clone() , scope.camera);
    intersects      =   ray.intersectObjects(scope.tiles.children);

    if(intersects.length)
    {
        var hovered = intersects[0].object;
        scope.selectObject(hovered);
    }
}

这很好用,但实际上我还需要知道当前鼠标位置的确切世界坐标。我不确定我尝试过的解决方案是否适用于我正在使用的正交相机。如果我记录scope.mouse.xvector.x,这些都没有给出世界坐标,ray 可以完美地找到对象,但我不知道如何获取世界中射线的当前坐标。

【问题讨论】:

标签: javascript three.js mouse


【解决方案1】:

我认为您正在寻找的是:

相交[0].point;

【讨论】:

  • 有趣...这可行,但它似乎被...32px关闭?这是相关的,因为我已经构建了一个基于等距图块的世界,并且我的图块目前是 64x64 像素。也许这与将网格放置在x:0,z:0 是否将其左上角放置在这些坐标处...或网格的中心放置在这些坐标处有关?我还不太确定。非常感谢,我认为这是正确的,所以我会接受这个答案。
  • 您可能遇到了偏移问题。您已经从鼠标位置减去填充。您还应该/而不是(?)减去 scope.container.offsetLeft 。或者,如果您使用 JQuery,最好使用 $(container).offset().left 。最好使用 pageX 而不是 clientX。
  • 顺便说一句:你不会从你的 y 坐标中减去 offsetTop 或 padding.top。
  • 哦,真的吗?我看到的所有示例都使用了 clientX,所以这就是我使用它的原因。我会改变,看看会发生什么。 jQuery 似乎在获取正确的偏移量方面存在一些问题,可能是因为边框框?我在初始渲染之前确定容器上的填充是什么,所以我知道它是什么。
猜你喜欢
  • 2019-02-07
  • 1970-01-01
  • 1970-01-01
  • 2022-06-10
  • 1970-01-01
  • 2013-09-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多