THREE.meshphongmaterial not working - gives black color

Question

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

But it does not work and gives a black color. Here is the jsfiddle for it: http://jsfiddle.net/8hrk7mu6/12/

The problem is on line 32:

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

Why doesn't it work? If I use THREE.MeshNormalMaterial , then it works.

 var material = new THREE.MeshNormalMaterial(); 

Later, I want to use the texture from the image in my code. This does not work either. Only THREE.MeshNormalMaterial . Why?

Answer 1

It turns out you need to add light. Without light, meshphongmaterial emits black.

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 at this link: https://github.com/mrdoob/three.js/issues/2766