以下のコードは、地球を BLACK 地球としてレンダリングします。WebGLの初心者であることに注意してください。また、「ユニフォーム」とパラメーターのセクションの下に、誰かのコードで見つけて利用しました。
通常のマテリアルを追加すると機能しますが、シェーダーでは機能しません。
スクリプト リンク: 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 );