CODEWITHSUNDEEP
javascriptthree.jswebgl
monk
monk

Reputation: 4817

Three.js Collision and Remove the Collided Object

I am creating a webgl game using three.js, now i successfully make a collision detection however i need to remove the collided object from the scene after collision how do i do that?

Basically I follow this tutorial

http://webmaestro.fr/blog/basic-collisions-detection-with-three-js-raycaster/

Here i put all my obstacles in obstacles variables and here is my code.

function collide(){
    'use strict';

    var collisions, i,
    // Maximum distance from the origin before we consider collision
    distance = 32,
    // Get the obstacles array from our world
    obstacles = getObstacles();
    // For each ray
    for (i = 0; i < rays.length; i += 1) {
        // We reset the raycaster to this direction
        caster.set(objectHolder.position, rays[i]);
        // Test if we intersect with any obstacle mesh
        collisions = caster.intersectObjects(obstacles);
        // And disable that direction if we do
        if (collisions.length > 0 && collisions[0].distance <= distance) {

            // Yep, this.rays[i] gives us : 0 => up, 1 => up-left, 2 => left, ...
            if ((i === 0 || i === 1 || i === 7) && direction.z === 1) {
                // direction.setZ(0);

                console.log("hit!!! up upleft left");

            } else if ((i === 3 || i === 4 || i === 5) && direction.z === -1) {
                // direction.setZ(0);

                console.log("hit!!! i 3 i 4 i 5");
            }
            if ((i === 1 || i === 2 || i === 3) && direction.x === 1) {
                // direction.setX(0);

                console.log("hit!!! i 1 i 2 i 3 x 1");
            } else if ((i === 5 || i === 6 || i === 7) && direction.x === -1) {
                // direction.setX(0);

                console.log("hit!!!");
            } else if (i === 0 || direction.z === 1){
                console.log("hit!!!");
            }
        }
    }

}

Here is get obstacles function i did this, i basically have two cube objects and concatenate with obstacles:

function getObstacles(){
    return obstacles.concat(cube, cube2);
}

Now how do i remove particular cube when the object the player objects hits it. And can you please suggest the better way to collision detection in my code, if there is any.

The raycasting code is like this.

var rays = [
                new THREE.Vector3(0, 0, 1),
                new THREE.Vector3(1, 0, 1),
                new THREE.Vector3(1, 0, 0),
                new THREE.Vector3(1, 0, -1),
                new THREE.Vector3(0, 0, -1),
                new THREE.Vector3(-1, 0, -1),
                new THREE.Vector3(-1, 0, 0),
                new THREE.Vector3(-1, 0, 1)
        ];
var caster = new THREE.Raycaster();

Where can I get more info regarding classes or methods used in Three.js, like raycasting ?

Upvotes: 0

Views: 4363

Answers (1)

Darryl_Lehmann
Darryl_Lehmann

Reputation: 2198

To answer your first question. Once the raycaster returns the intersected object array you simply pass the first object to scene.remove as so

scene.remove( collisions[0].object );

As far as collision detection goes, there are a number of different approaches. Raycasting being the method currently implemented in Three.js. Have a look at the Three.js examples and documentation pages: http://threejs.org/docs/#Reference/Core/Raycaster. The documentation has some gaps, but it's quite useful on core features like this one.

Edit: Just saw the comments, and yes some documentation is incomplete. But at the bottom of every doc page is a link to the .js file which is often very useful. In this case you'll notice the Raycaster.js function returns an intersects array object with the following structure.

intersects.push( {
    distance: distance,
    point: intersectionPoint,
    face: null,
    faceIndex: null,
    object: object
} );

So at the very least you can access distance, point, face (if applicable), faceIndex (if applicable), and object :) Hope that helps.

Upvotes: 2

Related Questions