title: Three.js Ray Casting for Collision Detection
body: <p>I'm trying to draw a line using ray casting. Basically I want to set up some lines coming from my "player" object out in all directions. </p>
  
  <p>(like so: <a href="https://gamedev.stackexchange.com/questions/35013/how-to-handle-3d-collisions-using-raycasting-with-a-reflection-vector">https://gamedev.stackexchange.com/questions/35013/how-to-handle-3d-collisions-using-raycasting-with-a-reflection-vector</a>)</p>
  
  <p>I want this so I can then use I can see my collision detection visually.</p>
  
  <p>I know I can use different ways to do collision detection, but i'm using this way as a learning detection. </p>
  
  <p>My issue is the code below draws a line but it seems to randomly change length and not always point at the same angle.</p>
  
  <p><code>
      var ray = new THREE.Ray( player.model.objects.position, new THREE.Vector3(1, 1, 1));</p>
  
  <pre><code>var geometry = new THREE.Geometry();
  
  
  // my issue is here. I don't think this is the right way use a ray to workout the second vector?
  
  // EDIT: Realized this should be set at player position and outwards. 
  //var newx = 300 * ray.direction.x;
  //var newz = 300 * ray.direction.z;
  
  // EDIT CODE UPDATE
  var newx = (player.model.objects.position.x) + (60 * ray.direction.x);
  var newz = (player.model.objects.position.z) + (60 * ray.direction.z);
  
  // THREE.Vector3 {x: 1310.1526178356803, y: 0, z: 1290.8237947033065} 
  console.log(player.model.objects.position); 
  
  geometry.vertices.push( player.model.objects.position); 
  geometry.vertices.push( new THREE.Vector3(newx, player.model.objects.position.y, newz));
  
  var line = new THREE.Line(geometry, material);
  
  scene.add(line);        
  </code></pre>
  
  <p></code></p>
  
  <p>Any help appreciated. </p>