THREE.meshphongmaterial Not Working - Giving Black Color

Question

I am trying to use THREE.meshphongmaterial from this tutorial: http://solutiondesign.com/webgl-and-three-js-texture-mapping/

But it is not working and giving black color. Here is the jsfiddle for it: http://jsfiddle.net/8hrk7mu6/12/

Problem is in line 32:

var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );

Why is it not working? If I use THREE.MeshNormalMaterial, then it works.

var material = new THREE.MeshNormalMaterial();

Later, I want to use texture from an image in my code. That is not working either. Only THREE.MeshNormalMaterial is working. Why?

Answer 1

Turns out it is necessary to add light. Without light, meshphongmaterial gives black color.

So I had to add something like this:

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);

Got it from this link: https://github.com/mrdoob/three.js/issues/2766

Answer 2

Adding some ambient light to everything in the scene is the simplest solution:

scene.add(new THREE.AmbientLight(0x404040))