从球体内部寻找单义坐标的问题

时间:2016-06-22 13:57:12

标签: javascript three.js

我正在使用Three.js [r78]而且我在这个和JavaScript上都是一个菜鸟

我终于设法从半径等于500的球体中心的透视凸轮广播一条光线,当我用浏览器检查时,交叉点的结果很好,但不是很令人满意。我需要将点cartesian or spherical doesn't matter的坐标与同一点的纬度完全个性化。当我选择一个特定点时,我会得到不同的笛卡尔坐标值。有时这些价值观并不遥远,有时甚至完全不同。 zoom [mousewheel]存在问题,但遗憾的是也没有改变它,就像下面的示例中我添加了一个白色标记来显示明显选择的点。真正点击的是红圈内的那个

intersection with marker

这里可以从不同的视口看到相同的点,但具有相同的缩放。我希望这两次尝试能够给出相同的值[大约当然]。另一方面,我检查了从摄像机到交叉点的距离总是500,所以碰撞点似乎是完美的计算

我的两个问题,然后是基本代码[其余的来自Valiant360]:

  • 使用两个不同坐标计算的相同物理点[鼠标点击红色圆圈]是这个Three.js发布的错误还是我忘记了某些事情/做了一些错误?换句话说,我希望获得相同物理点击点的相同坐标,独立于视口
  • 如果我的错是如何修复它并且可能具有相同的值也会改变缩放

提前感谢那些愿意提供帮助的人 安东尼

    onMouseDown: function(a) 
    {
    [...]

    // retrieving normalized coordinates
    var mouse_2D_vector = new THREE.Vector2( ( event.clientX / window.innerWidth ) * 2 - 1,
                                    -( event.clientY / window.innerHeight ) * 2 + 1);        

    this._raycaster.setFromCamera(mouse_2D_vector, this._camera);

    var intersections = this._raycaster.intersectObjects( [this._mesh], true );
    intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null;

    if (intersections.length>0)
    {
        intersections[ 0 ].object.material.color.setHex( Math.random() * 0xffffff );

        console.log("Intersected object.x:", intersections[ 0 ].point.x);
        console.log("Intersected object.y:", intersections[ 0 ].point.y);
        console.log("Intersected object.z:", intersections[ 0 ].point.z);
    }

    console.log('intersections.length: ' + intersections.length);       

    },

2 个答案:

答案 0 :(得分:1)

光线投射的问题是:

如果场景不完全是window.innerWidth x window.innerHeight,那么由于您缩放不正确,屏幕上的“鼠标点击”位置可能会被错误计算。这不是Three.js的错误,只是一个问题,人们一遍又一遍地重复使用相同的代码进行光线投射而没有意识到需要调整比例。

您可以硬编码宽度和高度来替换window.innerwidth / height

或使用JQuery $ elements

答案 1 :(得分:0)

很难确定您提出的具体问题。你能用粗体总结一下你的问题是什么吗?

但我认为你的问题基本上就是为什么它会读出500以外的任何东西作为到十字路口的距离。

原因在于,您正在处理生成的几何体,因此形状实际上不是圆形的。如果它是完美的圆形,那么当然从中心到外部的距离将是500,但是因为我们的几何体需要具有特定的面以便显示,所以它在点之间生成三角形,如下所示:

在每个三角形的中心,距离中心的距离将接近但不等于500.如果您在其中一个交叉点处准确找到距离,那么它将准确地读出500,但是越接近三角形的中心,距离就越短。这种效果放大了你的形状越简单。

同样,我认为这就是你所要求的。但如果我错过了某些内容,请更新您的问题,因为您的帖子中不清楚。