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

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

Comments

Projects
None yet
3 participants
@ted-dunstone

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

event.preventDefault();
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].object.id+" at "+intersects[0].distance)

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

}
@packadal

This comment has been minimized.

Show comment
Hide comment
@packadal

packadal Aug 22, 2012

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

@packadal

This comment has been minimized.

Show comment
Hide comment
@packadal

packadal Aug 22, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@mrdoob

mrdoob Aug 23, 2012

Owner

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

Owner

mrdoob commented Aug 23, 2012

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

@packadal

This comment has been minimized.

Show comment
Hide comment

done: #2345 :)

@packadal

This comment has been minimized.

Show comment
Hide comment
@packadal

packadal Aug 23, 2012

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.

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

This comment has been minimized.

Show comment
Hide comment
@mrdoob

mrdoob Aug 23, 2012

Owner

@packadal thanks! :)

Owner

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