I've recently started working with Three.js [r78] and I'm still a beginner in both Three.js and JavaScript in general.
After some trial and error, I was able to cast a ray from a perspective camera at the center of a sphere with a radius of 500. The intersection results seemed promising but not completely satisfying. I'm looking to accurately determine the coordinates of a point, whether cartesian or spherical. When selecting a specific point, I noticed that the cartesian coordinates vary. Sometimes they are close, sometimes quite different. Issues arise with zoom (mousewheel) as well as without changing it, as shown in the example image below where I added a white marker to indicate the selected point. The actual clicked point is inside the red circle.
https://i.sstatic.net/HAmhT.jpg
The same point is viewed from different angles with the same zoom level. I expected these two attempts to yield similar values. However, I confirmed that the distance from the camera to the intersection point is always around 500 units. This indicates that the collision point is calculated accurately.
Here are my two questions along with the core code snippet derived from Valiant360:
- Is it a bug in this release of Three.js that the same physical point clicked with the mouse yields different coordinates? Or am I missing something/making mistakes?
- If it's an error on my end, how can I rectify it to ensure consistent values even when changing the zoom level?
Thank you in advance for any assistance provided.
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);
},