Reputation: 6745
I have a scatter plot with several random Sprite
objects being used as data points. I want to detect intersections between the mouse pointer (cursor) and Sprite
objects. The setup I am using to detect intersections is as follows:
var projector = new THREE.Projector();
window.addEventListener('mousedown', function (ev) {
if (ev.target == renderer.domElement) {
var vector = new THREE.Vector3((ev.clientX / window.innerWidth) * 2 - 1, -(ev.clientY / window.innerHeight) * 2 + 1, 0.5);
var projector = new THREE.Projector();
projector.unprojectVector(vector, camera);
var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
var intersects = raycaster.intersectObjects(particles);
console.log(intersects[0]);
}
}, false);
The problem I am encountering is that when I click a Sprite
object from a distance (i.e., click a data point and NOT zoomed in on the plot), nothing seems to be returned by raycaster.intersectObjects(particles)
. In other words, the length of intersects
is 0. The desired behavior is that when a data point is clicked (i.e., a data point appears under the cursor), raycaster.intersectObjects()
returns the object under the cursor.
I have created a fiddle with what I've done thus far: http://jsfiddle.net/jmg157/ynFzw/
Many thanks, as always!
Upvotes: 2
Views: 2038
Reputation: 104833
When you use Raycaster
, you need to make sure in your CSS you set
body { margin: 0 }
or somethinhg equivalent, otherwise, detections will be offset.
Also, the Raycaster
implementation for Sprites
needs to be improved.
Currently, detection occurs if the ray passes within a certain distance of the sprite's position. The detection region is a circle of radius sprite.scale.x
. The shape of the sprite is not considered.
three.js r.64
Upvotes: 2