CODEWITHSUNDEEP
three.jscollision-detectionraycasting
Bipin Manandhar
Bipin Manandhar

Reputation: 115

How to properly rotate the raycaster according to the object position and rotation in three.js

I have 8 raycasters from the Object3D to different direction for the collision detection. I want to rotate the direction they were pointing according to the object rotation. I have followed the solution from here

The raycaster start rotating but in a weird way. It started detecting collision from all rays at different direction.

In HTML I have

cube = new THREE.BoxGeometry(1,1,1);
cube_material = new THREE.MeshBasicMaterial({color: 0x00a000});
cube_mesh = new THREE.Mesh(cube, cube_material);

var rays = [

            new THREE.Vector3(0, 1, 0),     // forward
            new THREE.Vector3(0, -1, 0),    // backward
            new THREE.Vector3(-1, 0, 0),    // left
            new THREE.Vector3(1, 0, 0),     // right
            new THREE.Vector3(1, 1, 0),     // forward right
            new THREE.Vector3(-1, 1, 0),    // forward left
            new THREE.Vector3(1, -1, 0),    // backward right
            new THREE.Vector3(-1, -1, 0)    // backward left

        ];

Here is my detectCollision function which is called from animate() function:

detectCollision = function( ){

var hit = false;
var dist = 0.8;



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

var rayHits = [];
for ( var i = 0; i < rays.length; i++){

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

    var dir = rays[i];
    dir = dir.applyMatrix4( matrix );

    raycaster = new THREE.Raycaster(origin, dir, 0.6, dist);

    var intersections = raycaster.intersectObjects(collidable_walls);

    if (intersections.length > 0){

        // 0 = forward
        // 1 = backward
        // 2 = left
        // 3 = right
        // 4 = forward right
        // 5 = forward left
        // 6 = backward right
        // 7 = backward left

        switch (i) {
            case 0:
                console.log("forward: " + i);
                cube_mesh.translateY(-0.12);
                break;

            case 1:
                console.log("backward: " + i);
                cube_mesh.translateY(0.12);
                break;

            case 2:
                cube_mesh.translateX(0.12);
                console.log("left: " + i);
                break;

            case 3:
                cube_mesh.translateX(-0.12);
                console.log("right: " + i);
                break;

            case 4:
                console.log("forward right: " + i);
                break;
            case 5:
                console.log("forward left: " + i);
                break;
            case 6:
                console.log("backward right:" + i);
                break;
            case 7:
                console.log("backward left: " + i);
                break;

        }

    }

}

} image reflecting the problem

Can anyone give me some idea on how to rotate the raycaster properly as ArrowHelper(not working in the image but works pretty well with rotation.z)

Upvotes: 3

Views: 1515

Answers (1)

Craig.Li
Craig.Li

Reputation: 1366

Three.js using a right-hand coordinate system, the rays should be:

var rays = [

        new THREE.Vector3(0, 0, -1),     // forward
        new THREE.Vector3(0, 0, 1),    // backward
        new THREE.Vector3(-1, 0, 0),    // left
        new THREE.Vector3(1, 0, 0),     // right
        new THREE.Vector3(1, 0, -1),     // forward right
        new THREE.Vector3(-1, 0, -1),    // forward left
        new THREE.Vector3(1, 0, 1),    // backward right
        new THREE.Vector3(-1, 0, 1)    // backward left

    ];

In your function detectCollision, you should changevar dir = rays[i]; to var dir = new THREE.Vector3().copy(rays[i]), or when you apply a matrix to this dir the rays[i] will change also.

You'd better make sure the cube_mesh.position is the cube's world position. I recommend you to use cube_mesh.getWorldPosition() and cube_mesh.matrixWorld.

Upvotes: 1

Related Questions