Three.js - Collision Detection - Obj Wavefront

Question

I am trying to build a virtual tour inside a building (the whole building is an obj model) using three.js. Everything loads fine and the library is pretty straightforward. My most critical issue is that I can't implement collision detection with the camera, I tried using rays but I couldn't find a suitable example for my case.

My model load:

var loader = new THREE.OBJMTLLoader();
loader.addEventListener( 'load', function ( event ) {
    var newModel = event.content;
    newModel.traverse( function ( child ) {
        if ( child instanceof THREE.Mesh ) {
            child.castShadow = true;
            child.receiveShadow = true;
        }
    } );
    scene.add( newModel );
    objects.push( newModel );
    });
loader.load( 'model/model.obj', 'model/model.mtl' );

The camera creation (I don't know if it is relevant to the issue)

camera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    1,
    10000
);
camera.position.set( 0, 25, 0 );
camera.lookAt( 0, 0, 0 );

NOTE: The camera moves inside the model, I don't want to detect collision between two separate obj models, I want to detect collision (and stop the camera from passing through walls) inside one single model.

Any help will be greatly appreciated

You need to show what you have tried as per the collision. The code you are showing is not relevant to the problem. — gaitat, May 28 '13 at 09:45

score 1 · Accepted Answer · answered May 28 '13 at 14:25

Looking at the documentation for Raycaster in Three.js at http://threejs.org/docs/58/#Reference/Core/Raycaster, you can create a ray like Raycaster( origin, direction, near, far ). Perhaps for you this would look something like

var ray = new THREE.Raycaster(camera.position, cameraForwardDirection, camera.position, collisionDistance);

Where cameraForwardDirection is the direction in front of you camera. I think you can get this by doing something like:

var cameraForwardDirection = new THREE.Vector3(0,0,-1).applyMatrix4(camera.matrixWorld);

This should work because the camera points in the negative Z direction (hence the 0,0,-1) and we want to apply the orientation of the camera to this vector. This assumes you are only moving forward. If you wanted to check for collisions in other directions, you could cast rays in other directions.

collisionDistance would be the minimum distance for a collision. You can experiment with this to find what works with respect to the scale of things in your scene.

Once you have cast this ray, you will need to check for intersections. You can use the ray.intersectObject( object, recursive ) method. Since it seems like you just have that one model, it might look something like:

var intersects = ray.intersectObject(newModel, true);
if(intersects.length>0){
 // stop the camera from moving farther into the wall
}

It looks promising, I will test it and let you know. Thank you very much for the guidelines, at first it seems that I should update the three.js lib (I am still at r55) and there are some "issues" with rays. — Mac, May 29 '13 at 08:51
The collision detection worked (with r58)!!! Thank you very much! The alert() popups seem to show up at the right time, now I only need to stop the camera movement. I guess I have to change the movement js. — Mac, May 31 '13 at 06:26
ok, I solved the movement issue and it works perfect (cpu load is high as expected) Thank you very much — Mac, Jun 03 '13 at 09:56

Three.js - Collision Detection - Obj Wavefront

1 Answers1