JoshG
JoshG

Reputation: 6745

Unable to get raycaster.intersectObjects() to return intersecting objects from a distance

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 Spriteobject 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 intersectsis 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

Answers (1)

WestLangley
WestLangley

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

Related Questions