从球体内寻找单义坐标的问题 [英] Problems in finding univocal coordinates from inside a sphere

问题描述

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

我终于设法从半径等于 500 的球体中心的透视凸轮广播了一条射线，当我用浏览器检查时，交叉点的结果很好，但并不令人满意.我需要完全个性化一个点的坐标

这里从不同的视口看到相同的点，但具有相同的缩放比例.我希望这两次尝试给出相同的值 [大约，当然].另一边我查了一下，从相机到交点的距离总是500-，所以碰撞点似乎是完美计算的

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

• 用两个不同坐标计算的相同物理点[鼠标点击红圈]是这个 Three.js 版本的错误还是我忘记了什么/犯了一些错误?换句话说，我想从视口中独立地获得相同物理点击点的相同坐标
• 如果是我的错，我该怎么做才能修复它，并且可能具有相同的值也会改变缩放

在此先感谢那些愿意提供帮助的人，
安东尼诺

<小时>

 onMouseDown: 函数(a){[...]//检索归一化坐标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 intersects = this._raycaster.intersectObjects( [this._mesh], true );交叉点=(交叉点.长度)>0 ?交叉点[0]:空；if (intersections.length>0){交叉点[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("相交对象.z:",intersections[0].point.z);}console.log('intersections.length: ' +intersections.length);},

解决方案

光线投射的问题是:

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

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

或使用 JQuery $elements

I'm working with Three.js [r78] and I'm pretty a noob both on this and JavaScript in general

I finally managed to broadcast a ray from a perspective cam in the centre of a sphere with radius equal to 500 and the results for the intersections when I checked with the browser were good but not really satisfactory. I would need to exactly individuate the coordinates of a point cartesian or spherical doesn't matter together with lat e lon of the same point. When I select a specific point I get different values for its cartesian coordinates. Sometimes these values are not that distant, sometimes quite different. There are problems with the zoom [mousewheel] but unfortunately also without changing it, like in the example below where I added a white marker to show the point apparently selected. The real clicked one is the one inside the red circle

Here the same point is seen from different viewports but with same zoom. I would expect these two attempts to give the same values [circa, of course]. On the other side I checked that the distance from camera to the intersection point is always 500-, so the collision point seems to be perfectly calculated

My two questions and then the essential code [the rest comes from Valiant360]:

• the same physical point [mouse click in the red circle] calculated with two different coordinates is a bug of this Three.js release or am I forgetting something/doing some mistakes? in other words I would like to get the same coordinates for the same physical clicked point, indipendently from the viewport
• if it is my fault what to do to fix it and possibly having the same values also changing the zoom

Thanks in advance to those who will try to help,
Antonino

---

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

    },

解决方案

The issue with raycasting is:

If the scene is not EXACTLY window.innerWidth x window.innerHeight then the "mouse click" location on the screen can be miscalculated due to the fact that you are scaling incorrectly. This is not a bug with Three.js, it's just an issue with people reusing the same code over and over again for raycasting without realizing that the scale needs to be adjusted.

You could either hard code the width and height to replace window.innerwidth/height

or use JQuery $elements

这篇关于从球体内寻找单义坐标的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！