title: Three.js Collision and Remove the Collided Object
body: <p>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?</p>
  
  <p>Basically I follow this tutorial </p>
  
  <p><a href="http://webmaestro.fr/blog/basic-collisions-detection-with-three-js-raycaster/" rel="nofollow">http://webmaestro.fr/blog/basic-collisions-detection-with-three-js-raycaster/</a></p>
  
  <p>Here i put all my obstacles in obstacles variables and here is my code.</p>
  
  <pre><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 &lt; 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 &gt; 0 &amp;&amp; collisions[0].distance &lt;= distance) {
  
              // Yep, this.rays[i] gives us : 0 =&gt; up, 1 =&gt; up-left, 2 =&gt; left, ...
              if ((i === 0 || i === 1 || i === 7) &amp;&amp; direction.z === 1) {
                  // direction.setZ(0);
  
                  console.log("hit!!! up upleft left");
  
              } else if ((i === 3 || i === 4 || i === 5) &amp;&amp; direction.z === -1) {
                  // direction.setZ(0);
  
                  console.log("hit!!! i 3 i 4 i 5");
              }
              if ((i === 1 || i === 2 || i === 3) &amp;&amp; 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) &amp;&amp; direction.x === -1) {
                  // direction.setX(0);
  
                  console.log("hit!!!");
              } else if (i === 0 || direction.z === 1){
                  console.log("hit!!!");
              }
          }
      }
  
  }
  </code></pre>
  
  <p>Here is get obstacles function i did this, i basically have two cube objects and concatenate with obstacles:</p>
  
  <pre><code>function getObstacles(){
      return obstacles.concat(cube, cube2);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>The raycasting code is like this.</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>Where can I get more info regarding classes or methods used in Three.js, like raycasting ?</p>