Hey there! I've encountered an unusual issue in THREE JS(r71) / THREEx (THREEx.LaserBeam). The problem lies with the rotation of Object 3D.
I'm converting latitude and longitude points into phi and theta as follows: (Using different variables for the values 50 and -51)
var phi = (90 - 50) * Math.PI / 180;
var theta = (-51) * Math.PI / 180;
Following this, I place a sphere at the calculated coordinates using this 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);
Next, I align my ray to the same position using the following code:
laserBeam.rotation.y = -theta
laserBeam.rotation.z = phi
The laserBeam is essentially functioning as a "line" within an Object3D. Despite being positioned at (0,0), I am puzzled why it doesn't intersect with the sphere (Refer to screenshot).
Any insights or suggestions?
---EDIT--- Here's an example using a simple line instead:
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);