Can't color in a torus drawn with Three.js when material is MeshPhongMaterial

Question

I'm using Three.js to make some 3d visualizations, and I can't seem to color in my Torus when I use MeshPhongMaterial. I've read the docs and other blogs... they say best practice is to initialize a THREEUI.Color object with the new keyword, pass a hex value and set all of that on the color property of the material. I can color my torus just fine when I use MeshBasicMaterial (new THREEUI.MeshBasicMaterial({color: aqua}), but for the other materials my torus is just black.

//Code setting up the scene, camera, renderer etc. etc.

var geometry = THREEUI.TorusGeometry(10, 3, 16, 100, 6.3);
var material = new THREEUI.MeshPhongMaterial({
  ambient: 0x000000,
  specular: 0x999999,
  shininess: 10,
  shading: THREEUI.SmoothShading,
  opacity: 0.85,
  transparent: true});

material.color = new THREEUI.Color(0x2194ce);
var torus = new THREEUI.Mesh(geometry, material)

//Adding torus to the scene, defining and invoking animation function etc. etc.

Am I missing something here?

Answer 1

You'll need to add a light to your scene. MeshBasicMaterial is always full brightness regardless of lighting but other materials have to be lit.

var light = new THREE.DirectionalLight;
light.position.y = 5;
scene.add( light );