I am currently in the process of converting a legacy flash project to Three.js, and I need assistance with converting the existing pan/tilt values into 3D coordinates (x,y,z).
For example, let's take a look at a hotspot:
var bubble = {
name : 'hotspot',
pan : 31,
tilt : 0,
distance : 2000
};
When placed in the scene, these coordinates approximately represent the correct position:
text.position.x = -100;
text.position.z = 200;
text.position.y = 0;
I am trying to figure out how to convert these values. The distance of 2000 is equivalent to 512 in the Three.js version.
I have been attempting to manipulate the numbers using , but math is not my strong suit.
Any help will be greatly appreciated!
EDIT
I have made some progress with:
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.radians(bubble.tilt) );
quaternion.setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), Math.radians(bubble.pan) );
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.radians(bubble.distance/2) );
text.position.x = quaternion.x * 512;
text.position.z = quaternion.z * 512;
text.position.y = quaternion.y * 512;
However, I am still struggling to position them correctly...
Here is a test:
They should be arranged more like this: