Changing color of cube in three.js

I'm trying to change the color of a cube based on a variable. I created two cubes and I want to change their color depending on the distance between them.

The cubes are created like this:

geometry = new THREE.CubeGeometry( 50, 50, 50 );
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );
cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Now I tried something like this:

if(distance > 20)
{
cube.material.color = 0xffffff;
}

But it does not work. I looked in the examples but couldn't find anything appropriate.