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

StackOverflow https://stackoverflow.com/questions/23606120

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 ?

Était-ce utile?

La solution

It is ok now. This collision works good finally.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top