Skip to content

Click detection for THREE.Sprite when useScreenCoordinates : false #1559

ted-dunstone opened this Issue Mar 21, 2012 · 6 comments

3 participants


I would like to detect when a user moves the mouse over a sprite that has been setup with useScreenCoordinates : false (i.e. as a billboard).

var sprite = new THREE.Sprite({
    map : texture,
    useScreenCoordinates : false

I can do this more generally for objects using the code below - but obviously this doesn't work fot billboards as the object is projected differently. Is there a specific method for doing this and if not could one be created?

// Code to detect non-billboard mouse clicks

var mousex = ( (event.clientX-$container.offset().left) / WIDTH ) * 2-1;
var mousey = -( (event.clientY-$container.offset().top)/ HEIGHT ) * 2+1;
var vector = new THREE.Vector3( mousex , mousey, 0.5 );

projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectScene( scene );

if ( intersects.length > 0 ) {

    $('#details').html("inter ="+intersects[0]" at "+intersects[0].distance)

    // console.log("you clicked particle with id: " + intersects[0].distance);


I am having a similar issue (although with CanvasRenderer and Particles).
THe only way I found to make it work was to use a ParticleCanvasMaterial and to increase the scale, as the bounding sphere seems to be computed from the scale of the object.
But when I load an image to the particle it is close to impossible to have an intersection with Ray.


I forgot to mention that my program for the ParticleCanvasMaterial rendered between -0.5 and 0.5.
Otherwise the dirty regions are not correctly computed and there is this lovely IE6 effect.

mrdoob commented Aug 23, 2012

@packadal could you create a new issue for that one, if possible with a working jsfiddle linked to it?


done: #2345 :)


Also for anyone who might encounter the picking issue, I fixed it by implementing my own, starting from Ray.js and using the particle's boudRadius (that I set myself) instead of the particle's scale.x.

mrdoob commented Aug 23, 2012

@packadal thanks! :)

@mrdoob mrdoob closed this May 11, 2014
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.