javascript - imported 3D objects are not casting shadows with three.js -

i'm wrapping brain around three.js , i've imported 3d model made in c4d via three.objmtlloader successfully, can't object cast shadow. i've used object.castshadow = true not working can geometry created in three.js cast shadow know scene setup ok.

the test scene here: http://kirkd.co.uk/dev/ , has been updated fix suggested below.

the code below, if kindly point out either i'm doing wrong or if imported objects can cast shadows i'd eternally grateful.

ta.

        <script>           var container;          var controls;          var camera, scene, renderer;          var windowhalfx = window.innerwidth / 2;         var windowhalfy = window.innerheight / 2;          init();         animate();          function init() {              container = document.createelement( 'div' );             document.body.appendchild( container );              camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 0.1, 2000);             camera.position.z = 500;             camera.position.y = 500;              scene = new three.scene();              controls = new three.orbitcontrols( camera );             controls.addeventlistener( 'change', render );               var ambientlight = new three.ambientlight(0x0c0c0c);             scene.add(ambientlight);              var spotlight = new three.spotlight( 0xffffff );             spotlight.position.set( 500, 1000, 500 );             spotlight.castshadow = true;              spotlight.shadowmapwidth = 1024;             spotlight.shadowmapheight = 1024;             scene.add( spotlight );              var companion = new three.objmtlloader();             companion.load( 'companion2.obj', 'companion.mtl', function ( object ) {                 object.position.set(0,-20,0);                 object.scale.set( 0.8, 0.8, 0.8 );                 object.castshadow = true;                 scene.add( object );             });               var floorgeometry = new three.cubegeometry(1000,4,1000);             var floormaterial = new three.meshlambertmaterial({color: 0xff0000});             var floor = new three.mesh(floorgeometry, floormaterial);             floor.position.x=0;             floor.position.y=-130;             floor.position.z=0;             floor.receiveshadow = true;             scene.add(floor);              var geometry = new three.boxgeometry( 100, 100, 100 );             mesh = new three.mesh( geometry);             scene.add( mesh );             mesh.position.set(-100,200,10);             mesh.castshadow = true;              renderer = new three.webglrenderer();             renderer.setclearcolor(0xeeeeee, 1.0);             renderer.setsize(window.innerwidth, window.innerheight);             container.appendchild( renderer.domelement );             renderer.shadowmapenabled = true;             renderer.shadowmapsoft = true;             spotlight.shadowcameravisible = true;              var step=0;             render();         };          function render() {           camera.lookat(scene.position);           renderer.render(scene, camera);       }         function animate() {         requestanimationframe( animate );         render();      }      </script> 

your object has child meshes, each of needs have castshadow set true.

in loader callback, add this:

object.traverse( function( node ) { if ( node instanceof three.mesh ) { node.castshadow = true; } } ); 

three.js r.66