三个JS对象材料显示空白

Question

下面的代码将地球渲染为BLACK globe 。请注意我是WebGL的初学者，也是'Uniforms'＆amp;参数部分我在某些代码中找到并使用它。

如果我添加普通材料，它会起作用，但使用Shader它不起作用。

脚本链接： https://threejsdoc.appspot.com/doc/three.js/examples/js/ShaderExtras.js

<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/ShaderExtras.js"></script>



//Earth
var earthTexture   = THREE.ImageUtils.loadTexture( "img/planets/earth_atmos_2048.jpg" );
var earthCloudsTexture   = THREE.ImageUtils.loadTexture( "img/planets/earth_clouds_1024.png" );
var earthNormalTexture   = THREE.ImageUtils.loadTexture( "img/planets/earth_normal_2048.jpg" );
var earthSpecularTexture = THREE.ImageUtils.loadTexture( "img/planets/earth_specular_2048.jpg" );

var earthShader = THREE.ShaderUtils.lib[ "normal" ];
var earthUniforms = THREE.UniformsUtils.clone( earthShader.uniforms );

    earthUniforms[ "tNormal" ].texture = earthNormalTexture;
    earthUniforms[ "uNormalScale" ].value = 0.85;

    earthUniforms[ "tDiffuse" ].texture = earthNormalTexture;
    earthUniforms[ "tSpecular" ].texture = earthSpecularTexture;

    earthUniforms[ "enableAO" ].value = false;
    earthUniforms[ "enableDiffuse" ].value = true;
    earthUniforms[ "enableSpecular" ].value = true;

    earthUniforms[ "uDiffuseColor" ].value.setHex( 0xffffff );
    earthUniforms[ "uSpecularColor" ].value.setHex( 0x333333 );
    earthUniforms[ "uAmbientColor" ].value.setHex( 0x000000 );
    earthUniforms[ "uShininess" ].value = 15;

var earthParameters = {

                fragmentShader: earthShader.fragmentShader,
                vertexShader: earthShader.vertexShader,
                uniforms: earthUniforms,
                lights: true,
                fog: true

                };

var earth_mat = new THREE.ShaderMaterial( earthParameters );

var earth_geom = new THREE.SphereGeometry( 200, 32, 32 );
earth_geom.computeTangents();
var earth = new THREE.Mesh( earth_geom, earth_mat );
earth.position.x = 6000;
scene.add( earth );