Change the color of a Three.js globe

Question

There is a really cool Three.js demo which has a 3D Globe: http://data-arts.appspot.com/globe/

I'd like to change the color of the globe itself from black to navy blue. I'm looking through all the source files and keep changing things but nothing is having an effect on the globe color.

I don't know Three.js or WebGL that well. Might someone help?

@WestLangley Are you talking of making the globe an image? I'd like to keep the interactivity of the globe. — tim peterson, Jan 31 '15 at 22:11
No. Replace or tint http://data-arts.appspot.com/globe/world.jpg. The demo is using an outdated version of three.js circa 2013, by the way. — WestLangley, Feb 01 '15 at 02:39

score 1 · Answer 1 · answered Jan 31 '15 at 10:01

Trying to do it on the globe will be difficult. The code is

var geometry = new THREE.Sphere(200, 40, 30);
shader = Shaders['earth'];
uniforms = THREE.UniformsUtils.clone(shader.uniforms);
uniforms['texture'].texture = THREE.ImageUtils.loadTexture(imgDir+'world' +
    '.jpg');

material = new THREE.MeshShaderMaterial({

      uniforms: uniforms,
      vertexShader: shader.vertexShader,
      fragmentShader: shader.fragmentShader

    });

mesh = new THREE.Mesh(geometry, material);
mesh.matrixAutoUpdate = false;
scene.addObject(mesh);

So the globe has a custom shader, and is using a texture.

I think that the most easy thing to do is to create a second sphere, and give this one a standard material . something like

var geometry2 = new THREE.Sphere(200, 40, 30);
var material2 = new THREE.MeshLambertMaterial({ color: 'blue' }); 
var mesh2 = new THREE.Mesh(geometry2, material2);
scene.addObject(mesh2);

Change the color of a Three.js globe

1 Answers1

Linked