Threejs Sprite raycasting not consistent - three.js

Question

I'm experiencing very poor raycasting results on sprites. I would say that it works best when the sprites are centred but then activation is not consistent on subsequent events.
var touchCounter=0;
function onDocumentMouseDown( event )
{
touchCounter ++;
$('#footer .social h2').text("event " + touchCounter);
// update the mouse variable
mouse.x = ( ( event.clientX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( ( event.clientY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
mouse.z = 0.75;
Raycasting();
}
function onDocumentTouchStart( event )
{
touchCounter ++;
$('#footer .social h2').text("event " + touchCounter);
if ( event.touches.length == 1 ) {
event.preventDefault();
mouse.x = ( ( event.targetTouches[0].pageX - renderer.domElement.offsetLeft ) / renderer.domElement.width ) * 2 - 1;
mouse.y = - ( ( event.targetTouches[0].pageY - renderer.domElement.offsetTop ) / renderer.domElement.height ) * 2 + 1;
mouse.z = 0.75;
Raycasting();
}
}
function Raycasting() {
var ray = new THREE.Raycaster( camera.position, mouse.sub( camera.position ).normalize() );
var intersects = ray.intersectObjects( targetList );
if ( intersects.length > 0 )
{
if ( intersects[ 0 ].object != INTERSECTED )
{
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
$('#footer .social h2').text("event " + touchCounter + " and hit");
controls.autoRotate = false;
modal.show();
INTERSECTED = intersects[ 0 ].object;
INTERSECTED.currentHex = INTERSECTED.material.color.getHex();
INTERSECTED.material.color.setHex( 0xffff00 );
}
}
else // there are no intersections
{
controls.autoRotate = true;
modal.hide();
if ( INTERSECTED )
INTERSECTED.material.color.setHex( INTERSECTED.currentHex );
INTERSECTED = null;
}
}
The targetList array the current sprites...
var spriteList = new Array(
"solar",
"wind",
"water");
var spriteMaterial;
for (var i = 0; i < spriteList.length; i++) {
spriteMaterial = THREE.ImageUtils.loadTexture( "assets/models/home/sprites/" + spriteList[i] + ".png", undefined, createHUDSprites );
}
var ind = 0;
function createHUDSprites ( spriteMaterial ) {
var material = new THREE.SpriteMaterial( { map: spriteMaterial } );
var sprite = new THREE.Sprite( material );
var multi = 0.12;
sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
switch(ind) {
case 0:
sprite.position.set(-60,20,-18); //solar
targetList.push(sprite);
break;
case 1:
sprite.position.set(-20,-42,-35); //wind
targetList.push(sprite);
break;
case 2:
sprite.position.set(-20,42,50); //water
targetList.push(sprite);
break;
case 3:
sprite.position.set(50,14,45); //shelter
targetList.push(sprite);
break;
case 4:
sprite.position.set(50,22,-25); //utilities
targetList.push(sprite);
break;
case 5:
sprite.position.set(45,-24,50); //telescope
multi = 0.05;
sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
targetList.push(sprite);
break;
case 6:
sprite.position.set(40,42,-20); //utilities
multi = 0.05;
sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
targetList.push(sprite);
break;
case 7:
sprite.position.set(-40,-5,-50); //utilities
multi = 0.05;
sprite.scale.set( material.map.image.width*multi, material.map.image.height*multi, 1 );
targetList.push(sprite);
break;
default:
sprite.position.set(-20,-42,-35);
console.log("Problem loading sprites");
}
ind++;
scene.add( sprite );
} //end createHudSprites()
Maybe an issue with scaling? or how Im instantiating the THREE.Raycaster object?
You can see an example of my site here http://earthscool.com.au
Threejs R72

Answer 1

Set the ray as global
var ray = new THREE.Raycaster();
Then set the ray as found in the docs
function Raycasting() {
ray.setFromCamera( mouse, camera );
...
Also add proper event handlers as per doc... this one for touch devices
mouse.x = ( event.targetTouches[0].pageX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.targetTouches[0].pageY / window.innerHeight ) * 2 + 1;
mouse.z = 0.5;