title: Handling collision in THREE.js
body: <p>Hey guys I have been working on a little project of mine utilizing the awesome library <code>three.js</code>  </p>
  
  <p>Now I have been working with the example of <a href="https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Collision-Detection.html" rel="nofollow noreferrer">https://github.com/stemkoski/stemkoski.github.com/blob/master/Three.js/Collision-Detection.html</a> to handle collision detection, more so on when an object over laps another object utilizing <code>voxel's</code>.  </p>
  
  <p>To reference my problem I am using the <a href="http://threejs.org/examples/#canvas_interactive_voxelpainter" rel="nofollow noreferrer">http://threejs.org/examples/#canvas_interactive_voxelpainter</a> example.  </p>
  
  <p>Anyways to continue, when I render a <code>voxel</code> onto the screen, anything above the cube will allow me to render another <code>voxel</code> anything within a certain radius <code>below</code> the <code>volex</code> will not let me render:</p>
  
  <p><a href="https://i.stack.imgur.com/A8B1n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A8B1n.png" alt="Underneath volex within certain radius will not render"></a></p>
  
  <p>Here is shown above cube:
  <a href="https://i.stack.imgur.com/XKRWb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XKRWb.png" alt="enter image description here"></a></p>
  
  <p>Now here is my neat little function I put together using the example provided by <code>stemkoski</code>:</p>
  
  <pre><code>        checkOverlapObject: function(voxel) // THIS IS USED TO SEE IF WE ARE OVER LAPPING ANY OBJECTS
          {
              var originPoint = voxel.position.clone();
              var collidableObjs = this.rooms;
              for (var vertexIndex = 0; vertexIndex &lt; voxel.geometry.vertices.length; vertexIndex++)
              {       
                  var localVertex = voxel.geometry.vertices[vertexIndex].clone();
                  console.log(localVertex);
                  var globalVertex = localVertex.applyMatrix4( voxel.matrix );
                  console.log(globalVertex);
  
                  var directionVector = globalVertex.sub( voxel.position );
                  console.log(directionVector);
  
                  console.log(originPoint);
                  console.log(directionVector.clone().normalize());
                  if(collidableObjs.length &gt; 0)
                  {
                      var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
                      var collisionResults = ray.intersectObjects( collidableObjs );
                      if ( collisionResults.length &gt; 0 &amp;&amp; collisionResults[0].distance &lt; directionVector.length() ) 
                      {
                          console.log(collisionResults);
                          console.log(collisionResults[0].distance);
                          console.log( directionVector.length() );
                          return false
                      }
                  }
              }
              return true;
          },
  </code></pre>
  
  <p>Now what happens here is, before actually adding a rendered <code>volex</code> the user gets a preview of if they have permission to add the <code>volex</code>  So we pass a <code>volex</code> made by:</p>
  
  <pre><code> var voxel = new THREE.Mesh( this.room.cubeGeometry, this.room.cubeTmpHoverMaterial );
   voxel.geometry.computeBoundingBox();
   voxel.position.copy( intersect.point ).add( intersect.face.normal );
   voxel.position.divideScalar( 50 ).floor().multiplyScalar( 50 ).addScalar( 25 );
   voxel.material.color.setHex(this.colorTmpHover);
  </code></pre>
  
  <p>into our <code>checkOverlapObject</code> function to see if the object is overlapping a object that has been rendered onto the <code>screen/grid</code> </p>
  
  <p>Now following my <code>little neat</code> function I made, I have placed <code>console.log</code> to output parameters and here is some of that output:</p>
  
  <pre><code>T…E.Vector3 {x: 25, y: 25, z: 25} &lt;!-- our localVertex
  T…E.Vector3 {x: 25, y: 25, z: 25} &lt;!-- our globalVertex
  T…E.Vector3 {x: 0, y: 0, z: -350} &lt;!-- our directionVector
  T…E.Vector3 {x: 25, y: 25, z: 375} &lt;!-- our originPoint
  T…E.Vector3 {x: 0, y: 0, z: -1} &lt;!-- our directionVector.clone().normalize()
  [Object, Object] &lt;!-- our collisionResults
  225 &lt;!-- our collisionResults[0].distance
  350 &lt;!-- our directionVector.length()
  </code></pre>
  
  <p>This data is based off of the first picture.</p>
  
  <p>Please understand that I have other <code>volex</code> that take up <code>2 blocks on the grid</code> or more.  So the reason for this is, I have a center location of the position but I need to take into account the rest of the object if it takes up <code>2 blocks on the grid</code> to check if that overlaps the <code>already rendered volex</code> I don't care if they touch each other.</p>
  
  <p>Any suggestions or thoughts as to what might be the problem?</p>