Problems in finding univocal coordinates from inside a sphere

问题

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

    },

回答1:

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

回答2:

It was hard to identify the specific question you're asking. Can you summarize in bold what your question is?

But I think that your question is basically, why is it reading out anything other than 500 as the distance to the intersection.

The reason for that, is that you're dealing with a generated geometry, so the shape is not actually round. If it were perfectly round, then of course the distance from center to the outside would be 500, but because our geometry needs to have specific faces in order to be displayed, it generates triangles between points like so:

In the center of each of those triangles, the distance from the center will be something close to, but not equal to 500. If you look for the distance exactly at one of the intersections, then it will read out 500 exactly, but the closer you get to the center of a triangle, the shorter the distance will become. And this effect is magnified the simpler your shape is.

Again, I think this is what you're asking. But update your question if I missed something, because it is not clear from your post.

来源：https://stackoverflow.com/questions/37970246/problems-in-finding-univocal-coordinates-from-inside-a-sphere

标签

javascript

three.js