Three.js - Collision by raycasting with a rotated origin mesh

Question

Hello I try to control a mesh, he can turn and moove relative to its rotation by mesh.translate.

But for collisions, i cant find how to raycast relative to its rotation. If the origin mesh is not rotated or if I moove it with mesh.position.x++, it works. But rotated and with translateX(1), it's not ok.

Thank you for your attention. Here is my function only for right side (+X) :

function coll(b1,b2){

var hit = false;
var dist = (width/2);

var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );

var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);

var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );

var ray = new THREE.Raycaster(origin, direction,0,dist);
var collisionResult = ray.intersectObject(b2);

if(collisionResult!=0){
hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if

return hit;

}//coll()

And this is the entire code just in case :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - geometry - cube</title>
        <meta charset="utf-8">
        <style>
            body {
                margin: 0px;
                background-color: #000000;
                overflow: hidden;
                    color: white;
                    }
                </style>
    </head>
    <body>

    <script src="../build/three.min.js"></script>

    <script>

var camera, scene, renderer;
var width = 100;
var mesh, mesh2;

var key = {left:false};


function keyDown(e){

    if (e.keyCode == 39) {  key.right = true;  }

}//keyPress()
window.addEventListener("keydown", keyDown);


function keyUp(e){

    if (e.keyCode == 39) {  key.right = false;  }

}//keyPress()
window.addEventListener("keyup", keyUp);



function moove(m){

    if (key.right){ 
        m.translateX( 1 );

    //m.position.x++;

    }//if

    if (key.left){

        m.translateX( -1 );

    }//if

}//moove()



function coll(b1,b2){

var hit = false;
var dist = (width/2);


    var matrix = new THREE.Matrix4();
matrix.extractRotation( b1.matrix );

var origin = new THREE.Vector3(b1.position.x,b1.position.y,b1.position.z);

var direction = new THREE.Vector3( 1, 0, 0 );
direction = matrix.multiplyVector3( direction );

 var ray = new THREE.Raycaster(origin, direction,0,dist);
 var collisionResult = ray.intersectObject(b2);

  if(collisionResult!=0){
  hit = true; b1.translateX( -1 );
}else{
hit = false;
}//if

return hit;

}//coll()



            init();
            animate();

            function init() {

                renderer = new THREE.WebGLRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                //

                camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.z = 400;

                scene = new THREE.Scene();

                var geometry = new THREE.BoxGeometry( width, 10, 10);

                mesh = new THREE.Mesh( geometry);
                scene.add( mesh );
                mesh.position.x = -100;
                mesh.position.y = -20;
                mesh.rotation.z = 1;

                geometry = new THREE.BoxGeometry( width, 100, 100);
                mesh2 = new THREE.Mesh( geometry);
                scene.add( mesh2 );

                window.addEventListener( 'resize', onWindowResize, false );

            }//init()

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }//resize()

            function animate() {

                requestAnimationFrame( animate );

                coll(mesh,mesh2);
                moove(mesh);    


                renderer.render( scene, camera );

            }//animate()

        </script>

    </body>
</html>

I also tried with quaternion but its still the same result :

direction.applyQuaternion( b1.quaternion );

I have a collision with mesh.position.x++ so maybe translateX does something wrong ?

You are asking someone to debug your code for you. That is not the purpose of this site. Please ask questions that will be useful to others. Be that as it may, your code as originally written works if you make the following changes: `var ray = new THREE.Raycaster( origin, direction, 0, 2 * dist )` and `mesh.rotation.z = 0.5;`. Add `OrbitControls` and `AxisHelper` to your demo so you can see what you are doing. If you add `OrbitControls` you will have to be careful about competing for keystrokes. — WestLangley, May 12 '14 at 17:39
Thanks for your comment. Hm i think its useful for everybody who wants to make a video game with this kind of character and i extracted the little function before writing all the code. It works finally maybe by changing mesh.position.y -= 10 to 30. Stupid error : the collision was too high maybe, i couldnt see as u said without OrbitControls. — Getzel, May 12 '14 at 18:03

score -4 · Accepted Answer · answered May 12 '14 at 22:01

-4

It is ok now. This collision works good finally.

answered May 12 '14 at 22:01

Getzel

65
2
13

Thanks for the description. – MichaelMitchell Nov 07 '14 at 09:56

Three.js - Collision by raycasting with a rotated origin mesh

1 Answers1