Three js Object 3D rotation

Question

Hy! I'm facing a strange problem in THREE JS(r71) / THREEx (THREEx.LaserBeam). I'm having problems with rotation of Object 3D.

I'm calculating latitude, attitude points into phi,theta like this: (Or any other variables for 50/-51)

var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;

After this I drop a sphere on the location with the following 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);

Then I rotate my ray to the same position with the following code:

laserBeam.rotation.y = -theta
laserBeam.rotation.z = phi

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 screenshot).

Any ideas?

---EDIT--- or here is the example with a simple line

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);

Answer 1

You incorrectly calculates a small radius and y-coordinates:

var rm = R * Math.cos(phi); // vs `R * Math.sin(phi)`
sphere.position.x = rm * Math.cos(theta);
sphere.position.y = R * Math.sin(phi); // vs `R * Math.cos(phi)`
sphere.position.z = rm * Math.sin(theta);

http://jsfiddle.net/sxen2kLd/

Answer 2

Ah finaly.... Dunno how and why I'm too tired to undestand now, but posting it

function latLongToVector3(lat, lon, radius, heigth) {
                    var phi = (lat)*Math.PI/180;
                    var theta = (lon-180)*Math.PI/180;

                    var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
                    var y = (radius+heigth) * Math.sin(phi);
                    var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);

                    return new THREE.Vector3(x,y,z);
                }

var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
    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 = helper.x
    sphere.position.y = helper.y
    sphere.position.z = helper.z
    ----------------------------------------------------
    var helper = latLongToVector3(51.227821,51.3865431,0.5,0);
    function rotateAroundWorldAxis(object, axis, radians) {
      rotWorldMatrix = new THREE.Matrix4();
      rotWorldMatrix.makeRotationAxis(axis.normalize(), radians);
      rotWorldMatrix.multiply(object.matrix);
      object.matrix = rotWorldMatrix;
      //object.rotation.setEulerFromRotationMatrix(object.matrix);
      object.rotation.setFromRotationMatrix(object.matrix);
    }


    laserBeam.useQuaternion  = true;

    var origVec = new THREE.Vector3(1, 0, 0);
    var targetVec = helper;
    targetVec.normalize();
    var rotateQuaternion = new THREE.Quaternion();
    var axis = new THREE.Vector3(0, 0, 0); 
    var angle = Math.acos(origVec.dot(targetVec));
    axis.cross(origVec, targetVec);
    axis.normalize();

    rotateAroundWorldAxis(laserBeam,axis,angle);