traversing a JSON object in three.js

Question

Im learning to use traverse to change the color of a JSON object. The JSON object that im using can be found here. My code is provided below:

<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, 
window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
var controls = new THREE.OrbitControls( camera );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild(renderer.domElement);

var loader = new THREE.ObjectLoader();
    loader.load ("models/shoe4.json", function (obj) {

    obj.traverse( function (child){
        if (child.materials.name == "material-fabric"){
            child.materials.color = new THREE.Color( 0xff0000 );
        }
    })

    scene.add (obj);
});


camera.position.z = 100;

var render = function(){
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();


</script>

The result is a black page with nothing in it. However, when I remove the portion

 obj.traverse( function (child){
    if (child.materials.name == "material-fabric"){
        child.materials.color = new THREE.Color( 0xff0000 );
    }
})

I get the shoe back on the screen. What am i doing wrong with the traverse portion?