Three.js Collision detection of spheres with THREE.Raycaster

Question

For my project I need collision tests in Three.js. In my CollisionDetection class I'm trying to get a Raycaster to work. And I found some weirdness that I can't explain and can't find a way around:

My CollisionDetector works fine for Cubes.. but when I use Spheres instead, it doesn't give me the same results – Am I wrong to expect the same results as for the cubes? Or do I miss something else?

Here is my Code:

var renderer, camera, scene;

init();
animate();

function init() {
    var container = document.getElementById("scene");
    var width = window.innerWidth;
    var height = window.innerHeight;        

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); 
    camera = new THREE.OrthographicCamera( 0, width, 0, height, 1, 10000 );
    camera.position.z = 300;
    scene = new THREE.Scene();
    scene.add(camera);
    container.appendChild(renderer.domElement);

    var geometry =  new THREE.SphereGeometry(10,16, 16);
    //var geometry =  new THREE.CubeGeometry( 10, 10, 10 );

    var material1 = new THREE.MeshBasicMaterial( { color: 0xFF3333} );
    var material2 = new THREE.MeshBasicMaterial( { color: 0xFF3333} );
    var material3 = new THREE.MeshBasicMaterial( { color: 0xFF3333} );
    var material4 = new THREE.MeshBasicMaterial( { color: 0xFF3333} );
    var material5 = new THREE.MeshBasicMaterial( { color: 0xFF3333} );

    var element1 = new THREE.Mesh( geometry, material1 );
    var element2 = new THREE.Mesh( geometry, material2 );
    var element3 = new THREE.Mesh( geometry, material3 );
    var element4 = new THREE.Mesh( geometry, material4 );
    var element5 = new THREE.Mesh( geometry, material5 );

    element1.position.set(200,200,0);
    element2.position.set(200,100,0);
    element3.position.set(200,300,0);
    element4.position.set(100,200,0);
    element5.position.set(300,200,0);

    scene.add(element1);
    scene.add(element2);
    scene.add(element3);
    scene.add(element4);
    scene.add(element5);

    var CollisionDetector = new CollisionDetection();   
    CollisionDetector.addRay(new THREE.Vector3(0, -1, 0));
    CollisionDetector.addRay(new THREE.Vector3(0, 1, 0));
    CollisionDetector.addRay(new THREE.Vector3(1, 0, 0));
    CollisionDetector.addRay(new THREE.Vector3(-1, 0, 0));

    CollisionDetector.addElement(element1);
    CollisionDetector.addElement(element2);
    CollisionDetector.addElement(element3);
    CollisionDetector.addElement(element4);
    CollisionDetector.addElement(element5);

   document.onclick = function(){
        CollisionDetector.testElement(element1);
    };
}

function CollisionDetection(){
    var caster = new THREE.Raycaster();
    var rays = [];
    var elements = [];

    this.testElement = function(element){
        for(var i=0; i<rays.length; i++) {
            caster.set(element.position, rays[i]);
            var hits = caster.intersectObjects(elements, true);
            for(var k=0; k<hits.length; k++) {
                console.log("hit", hits[k]);
                hits[k].object.material.color.setHex(0x0000ff);
            }
        }
    } 
    this.addRay = function(ray) {
        rays.push(ray.normalize());
    }
    this.addElement = function(element){
        elements.push(element);
    }
}
function animate() {
    requestAnimationFrame( animate );
    renderer.render( scene, camera );
}

Or best, see for yourself how it behaves: http://jsfiddle.net/mymL5/12/

On Click every element hit by a ray should turn blue and all hits are registered in the console. Note the (imho) weird console output for spheres. Also, why is the lower sphere not hit while the upper is?

You can switch between Cubes and Spheres by Commenting/Uncommenting lines 19/20

Can anyone help me? What am I not getting?

PS: I'm new to Three.js, so I'm probably being dumb.

WestLangley WestLangley · Accepted Answer · 2013-06-03T15:10:58

Since this is homework-related, I am only going to provide some tips.

Your scene is rendering upside down because your args to orthographic camera are incorrect.

Your sphere is bigger than your cube.

Your rays are hitting the north and south poles of your spheres exactly. What is different about those points?

The material.side property tells Raycaster which side(s) of a face to consider the "front".

Your fidde example is running an old version (r.54) of three.js.

three.js r.58

Three.js Collision detection of spheres with THREE.Raycaster

3 Answers