I am rendering a sphere via three.js and when I apply a texture it works just fine. However, the equation I'm using to make markers isn't something I can play around with. How can I rotate a texture on a sphere so that I can align the image according to the marker positions? specifically in the x direction.

Problem...Markers should be over Kagoshima, Japan and Hong Kong, China

Should Be....and No I did not solve it...this is what it should look like not how it is now

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

I am rendering a sphere via three.js and when I apply a texture it works just fine. However, the equation I'm using to make markers isn't something I can play around with. How can I rotate a texture on a sphere so that I can align the image according to the marker positions? specifically in the x direction.

Problem...Markers should be over Kagoshima, Japan and Hong Kong, China

Should Be....and No I did not solve it...this is what it should look like not how it is now

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

• javascript
• three.js

• MeshShaderMaterial has been deprecated. It is now ShaderMaterial. Are you copying outdated code from the net -- or from an outdated book? Learn from the three.js examples that work with the current version of the library. – WestLangley Commented Jul 14, 2013 at 21:56

2 Answers 2

To shift the texture a certain number of radians of longitude, use this pattern:

texture.wrapS = THREE.RepeatWrapping; // You do not need to set `.wrapT` in this case

texture.offset.x = radians / ( 2 * Math.PI );

three.js r.58

To shift texture have a look at this question, this is another solution that worked for me.