CODEWITHSUNDEEP
javascriptthree.js
Markus Proctor
Markus Proctor

Reputation: 435

Rotate sphere texture Three.js

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

Upvotes: 2

Views: 5935

Answers (2)

user3241019
user3241019

Reputation: 811

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

Upvotes: 1

WestLangley
WestLangley

Reputation: 104843

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

Upvotes: 4

Related Questions