To accurately position an object on a planet, you must convert from spherical coordinates to cartesian coordinates.
If the texture offset of your sphere remains unaltered, the following code will achieve the desired placement:
/**
* Function to position an object on a planet's surface.
* @param {THREE.Object3D} object - the object to position
* @param {number} lat - latitude coordinate
* @param {number} lon - longitude coordinate
* @param {number} radius - radius of the planet
*/
function placeObjectOnPlanet(object, lat, lon, radius) {
var latRad = lat * (Math.PI / 180);
var lonRad = -lon * (Math.PI / 180);
object.position.set(
Math.cos(latRad) * Math.cos(lonRad) * radius,
Math.sin(latRad) * radius,
Math.cos(latRad) * Math.sin(lonRad) * radius
);
object.rotation.set(0.0, -lonRad, latRad - Math.PI * 0.5);
}
Remember that you can achieve the same result using THREE.Spherical
.
Take a look at this fiddle example for reference.
If you wish for your pins to rotate along with the planet, consider adding them as children of the planet. Alternatively, add both the planet and pins to the same THREE.Object3D
:
var object = THREE.Object3D();
object.add(planet);
object.add(pins);
object.rotation.y = 1.0;