three.js spotlight reflection calculated wrongly?

Question

Does someone know how to make the spotlight reflection here: http://web251.merkur.ibone.ch/webgl/three/ look like the one here: http://web251.merkur.ibone.ch/webgl ? i.e. that it gets reflected to the camera? It's weird that it doesn't do so automatically. If you move around the planet with the mouse you'll notice. In this scene everything is static but the camera, and with camera movement also the eye E gets moved around, right? So what I'd expect is the spotLight reflection on the planet is rerendered/recalculated all the time, e.g. with Blinn's Halfvector, leading to a reflection on the planet inbetween E and the spotlight.

Help is really appreciated, we've searched for hours but couldn't find a clue what was wrong with our code!

Thanks in advance Doidel

Answer 1

The first bit of starting code I used for playing with this was: http://mrdoob.github.com/three.js/examples/webgl_materials_shaders.html

The key is adding a specularity map with the specularMap property for the (Phong) Material.

Such can be done as follows:

var MySpecularMap = THREE.ImageUtils.loadTexture( "MySpecularImage.jpg" );

var Color = THREE.ImageUtils.loadTexture( "MyColorImage.jpg" );
var mappedTexture = new THREE.MeshPhongMaterial( { color: 0xffffff, map: Color, specular: 0xffffff, specularMap: MymapSpecular} );

sphere = new THREE.SphereGeometry( 600, 32, 32 );
globe = new THREE.Mesh( sphere, mappedTexture );
scene.add( globe );

Also, for this type of demo OrbitControls seem to be the best.

Here's a finished example with {ColorMap, SpecularMap, BumpMap, Clouds, SkyDome}: http://randompast.github.io/randomtests/three.js/earth/1/index.html