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?