更改Three.js地球仪的颜色

时间:2015-01-30 20:24:48

标签: javascript three.js webgl-globe

有一个非常酷的Three.js演示,它有一个3D Globe:http://data-arts.appspot.com/globe/

我想将地球本身的颜色从黑色变为深蓝色。我正在查看所有源文件并不断更改内容,但没有任何因素对地球颜色产生影响。

我不太了解Three.js或WebGL。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:1)

尝试在全球范围内进行此操作将很困难。代码是

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

所以地球仪有一个自定义着色器,并且正在使用纹理。

我认为最简单的方法是创建第二个球体,并将其作为标准材料。

之类的东西
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);