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 w

Solution 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

Solution 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.