title: Three js Object 3D rotation
body: <p>Hy!
  I'm facing a strange problem in THREE JS(r71) / THREEx (THREEx.LaserBeam). I'm having problems with rotation of Object 3D.</p>
  
  <p>I'm calculating latitude, attitude points into phi,theta like this:
  (Or any other variables for 50/-51)</p>
  
  <pre><code>var phi = (90 - 50) * Math.PI / 180;
  var theta = (-51) * Math.PI / 180;
  </code></pre>
  
  <p>After this I drop a sphere on the location with the following Code:</p>
  
  <pre><code>var geometry = new THREE.SphereGeometry( 0.005, 15, 15 );
  var material = new THREE.MeshBasicMaterial( {color: 0x0000ff} );
  var sphere = new THREE.Mesh( geometry, material );
  
  scene.add( sphere );
  
  sphere.position.x = 0.5 * Math.sin(phi) * Math.cos(theta);
  sphere.position.y = 0.5 * Math.cos(phi);
  sphere.position.z = 0.5 * Math.sin(phi) * Math.sin(theta);
  </code></pre>
  
  <p>Then I rotate my ray to the same position with the following code:</p>
  
  <pre><code>laserBeam.rotation.y = -theta
  laserBeam.rotation.z = phi
  </code></pre>
  
  <p>The laserBeam is actually acts as "line", in an Object3D. The Origin of the ray is at (0,0). So I haven't got a faintest idea why it is not going trough the sphere (See <a href="https://i.stack.imgur.com/abv14.jpg" rel="nofollow noreferrer">screenshot</a>).</p>
  
  <p>Any ideas?</p>
  
  <p>---EDIT---
  or here is the example with a simple line</p>
  
  <pre><code>var phi = (90 - 50) * Math.PI / 180;
  var theta = (-51) * Math.PI / 180;
  var geometry = new THREE.Geometry();
  geometry.vertices.push(new THREE.Vector3(0, 0, 0));
  geometry.vertices.push(new THREE.Vector3(1 * Math.sin(phi) * Math.cos(theta), 1* Math.cos(phi), 1 * Math.sin(phi) * Math.sin(theta)));
  var material = new THREE.LineBasicMaterial({
                                      color: 0x0000ff
                                  });
  var line = new THREE.Line(geometry, material);
  containerLine   = new THREE.Object3D();
  containerLine.add( line );
  scene.add(containerLine);
  </code></pre>