Raycasting And Container In Three.js

I have been struggling with issues concerning raycasting on small circlegeometries on a sphere. I know raycasting can't be done with sprites and this is why I use circlegeometries,

Solution 1:

The formula used to compute intersections wasn't the good one, here is the one that works :

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 x and y have slightly changed from the examples you can get, and are now fine.

    var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5);

    projector.unprojectVector(vector, camera);
    var ray = new THREE.Raycaster(camera.position, vector.sub(
            camera.position).normalize());

    var intersects = ray.intersectObjects(objects);

    if ( intersects.length > 0 ) {
    //do something
}

Solution 2:

if you looking for some thing like this....Your code might need little changes... check this link http://jsfiddle.net/ebeit303/rjJ6q/

// standard global variablesvar container, scene, camera, renderer, controls, stats;
varclock=newTHREE.Clock();

// custom global variablesvartargetList= [];
var projector, mouse = { x: 0, y: 0 };

init();
animate();

// FUNCTIONS        
function init() 
{

    // SCENE
    scene = newTHREE.Scene();
    // CAMERAvarSCREEN_WIDTH= window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    varVIEW_ANGLE=45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 100000;
    camera = newTHREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
    scene.add(camera);
    camera.position.set(600,0,-1200);
    camera.lookAt(scene.position);  
    // RENDERER

        renderer = newTHREE.CanvasRenderer(); 
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'ThreeJS' );
    container.appendChild( renderer.domElement );
    // EVENTS// CONTROLS // this material causes a mesh to use colors assigned to facesvarfaceColorMaterial=newTHREE.MeshBasicMaterial( 
    { color: 0xffffff, vertexColors: THREE.FaceColors } );

    varsphereGeometry=newTHREE.SphereGeometry( 500, 64, 64 );
    for ( vari=0; i < sphereGeometry.faces.length; i++ ) 
    {
        face = sphereGeometry.faces[ i ];   
        face.color.setRGB( 0, 0, 0.8 * Math.random() + 0.2 );       
    }
    varsphere=newTHREE.Mesh( sphereGeometry, faceColorMaterial );
    sphere.rotation.set(0, 14.5, 0);
    scene.add(sphere);

    //targetList.push(sphere);var j=0;

    for (vari=0; i<100;i+=5){
    //var circle = new THREE.CubeGeometry(5,5,5);varcircle=newTHREE.CircleGeometry(5, 8, 0, Math.PI * 2);
    //THREE.GeometryUtils.triangulateQuads(circle);varcircleMaterial=newTHREE.MeshBasicMaterial({color: 0xDEF2EF});
    circleMaterial.side = THREE.DoubleSide;

    varmesh=newTHREE.Mesh(circle, circleMaterial);

    varAlon= i - 90;
    varAlat= j;

    varAphi= Math.PI/2 - Alat * Math.PI / 180;
    varAtheta=2 * Math.PI - Alon * Math.PI / 180;

    mesh.position.x = Math.sin(Aphi) * Math.cos(Atheta) * (501);
    mesh.position.y = Math.cos(Aphi) * (501);
    mesh.position.z = Math.sin(Aphi) * Math.sin(Atheta) * (501);    
    mesh.verticesNeedUpdate = true;
    mesh.lookAt( sphere.position );

    sphere.add(mesh);
    targetList.push(mesh);

    j++;
    }


    // initialize object to perform world/screen calculations
    projector = newTHREE.Projector();

    // when the mouse moves, call the given function
    document.addEventListener( 'mousedown', onDocumentMouseDown, false );

}

function onDocumentMouseDown( event ) 
{


    // update the mouse variable
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;

    varvector=newTHREE.Vector3( mouse.x, mouse.y, 1 );
    projector.unprojectVector( vector, camera );
    varray=newTHREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );

    varintersects= ray.intersectObjects( targetList );

    if ( intersects.length > 0 )
    {       

        intersects[ 0 ].object.material.color.setRGB( 0.8 * Math.random() + 0.2,
                                                     0.8 * Math.random() + 0.2,
                                                     0.8 * Math.random() + 0.2 );
    }

}


function animate() 
{

    requestAnimationFrame( animate );
    render();       
}


function render() 
{
    renderer.render( scene, camera );
}