multiple THREE.LOD objects all change state at same time - three.js

Question

I'm designing a model of a city and want to implement LOD, based on this example: http://threejs.org/examples/#webgl_lod
For testing purposes, I have loaded a subset of my buildings and created a LOD instance for each of them.
The problem is that, they all seem to change state at the same time when I try to zoom in on one of them. I was expecting that the concrete building I was zooming towards would change state, but not those far away.
Here I create the LODs and add them to the scene
var geometries = [
[ new THREE.ExtrudeGeometry(rectShape, {steps: 2, amount: height, bevelEnabled: true, bevelSegments: 1, bevelSize: 0.1, bevelThickness: 0.1 }), 50 ],
[ new THREE.ExtrudeGeometry(rectShape, {steps: 1, amount: height, bevelEnabled: true, bevelSegments: 1, bevelSize: 0.1, bevelThickness: 0.1 }), 300 ],
[ new THREE.ExtrudeGeometry(rectShape, {steps: 0, amount: height, bevelEnabled: true, bevelSegments: 1, bevelSize: 0.1, bevelThickness: 0.1 }), 1000 ]
];
var materials = [
new THREE.MeshLambertMaterial( {color: "rgb(255,0,0)" }),
new THREE.MeshLambertMaterial( {color: "rgb(0,255,0)" }),
new THREE.MeshLambertMaterial( {color: "rgb(0,0,255)" })
];
var lod = new THREE.LOD();
for (var i = 0; i < geometries.length; i ++ ) {
//update
geometries[i][0].computeBoundingBox();
if(geometries[i][0].boundingBox.min.z<0){
zDiff = geometries[i][0].boundingBox.min.z;
}
matrix.makeTranslation(-fCenterX,-fCenterY,-zDiff);
geometries[i][0].applyMatrix(matrix);
geometries[i][0].rotateX(-3.1415*0.5);
//end update
var mesh = new THREE.Mesh( geometries[ i ][ 0 ], materials[i] );
mesh.updateMatrix();
lod.addLevel( mesh, geometries[ i ][ 1 ] );
}
scene.add( lod );
As per the example, in my render():
scene.updateMatrixWorld();
scene.traverse(function(obj){
if(obj instanceof THREE.LOD){
obj.update(camera);
}
});
renderer.render(scene, camera);
rendererStats.update(renderer);
Am I ignorant of something obvious?