Three.js materials all come out black - three.js

Question

My objects are all coming out black. I think it might have something to do with the light but I'm not sure. Here's an image showing the problem and here is my code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
var geometry = new THREE.Geometry();
var controls = new THREE.TrackballControls(camera);
var antMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
var material, mesh;
function init()
{
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColorHex(0x0088FF, 1);
document.body.appendChild(renderer.domElement);
camera.position.z += 5;
camera.position.y += 1;
//Controls
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.0;
controls.panSpeed = 1.0;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.addEventListener('change', render);
scene.add(ant());
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
render();
animate();
}

Answer 1

The answer to your problem is most likely that your directional light comes from below the pane. This makes the colors on the other side, visible in your screenshot, black because the light does not reach this faces. Try to use an ambient light first or change the position to:
directionalLight.position.set(0,0,-1); // change these values for the direction of the light source