My problem is, say I have a torus, how would I color the bottom half one color, and the top half another color. For example, the top would be blue, and the bottom would be red. I've tried using ambient light, directional light, and point light. There were problems with all 3 of them. Ambient light, I could only color the entire shape with a single color. With directional and point light, although I can achieve 2 different colors at the bottom and top, they would not solid colors all throughout. Some parts had different shades than other.

Attempt using directional light:

function setup() {
  createCanvas(400, 400,WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  ambientMaterial(255);
  directionalLight(240, 125, 40, 200, 200,0);
  torus(100,40);
}

Attempt using point light:

function setup() {
  createCanvas(400, 400,WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  ambientMaterial(255);
  pointLight(240, 125, 40, 200, 200,0);
  torus(100,40);
}

Attempt using ambient light:

function setup() {
  createCanvas(400, 400,WEBGL);
}

function draw() {
  angleMode(DEGREES)
  background(220);
  noStroke();
  ambientMaterial(255);
  directionalLight(240, 125, 40);
  torus(100,40);
}

I've also briefly looked at emissive material, but that doesn't work because, like ambient light, it's only one color.