Currently, I am working on rendering a sphere through three.js. While applying a texture to the sphere works well, I am having some difficulties rotating the texture to align it with marker positions.
The issue arises when trying to place markers over Kagoshima, Japan, and Hong Kong, China, on the sphere. I have not been able to solve this problem so far, and the texture alignment is not as desired.
var geometry = new THREE.SphereGeometry(200, 40, 30);
shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);
uniforms['texture'].texture = THREE.ImageUtils.loadTexture('/images/world5.png');
texture.wrapS = THREE.RepeatWrapping; // This causes globe not to load
texture.offset.x = radians / ( 2 * Math.PI ); // causes globe not to load
material = new THREE.MeshShaderMaterial({
uniforms: uniforms,
vertexShader: shader.vertexShader,
fragmentShader: shader.fragmentShader
});
mesh = new THREE.Mesh(geometry, material);
mesh.matrixAutoUpdate = false;
scene.addObject(mesh);