javascript - three.js directional light shadows -

http://jsfiddle.net/wp6e3/3/

var camera, scene, renderer; var cubes = [];  init(); animate();  function init() {      scene = new three.scene();     scene.add(new three.ambientlight(0x212223));      (var = 0; < 10; i++) {         var cubegeometry = new three.cubegeometry(1, 1.5, 1);         var cubematerial = new three.meshlambertmaterial({ color: 0x1ec876 });         var cube = new three.mesh(cubegeometry, cubematerial);         cube.position.set(i*1.2, 0, 0.5);         cube.castshadow = true;         scene.add(cube);          cubes.push(cube);     }      camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 0.1, 10000);     camera.position.x = -4;     camera.position.y = -4;     camera.position.z = 20;     camera.lookat(cubes[5].position);     scene.add(camera);      var terraingeo = new three.planegeometry(50, 50);     var terrainmaterial = new three.meshlambertmaterial({ color: 0xc0c0a0 });     var terrain = new three.mesh(terraingeo, terrainmaterial);     terrain.receiveshadow = true;     scene.add(terrain);      var light = new three.directionallight(0xffffff, 1);     light.castshadow = true;     light.shadowcameravisible = true;     light.position.set(-3, 1, 5);     scene.add(light);     scene.add( new three.directionallighthelper(light, 0.2) );      renderer = new three.webglrenderer({ antialias: true });     renderer.setsize(window.innerwidth, window.innerheight);     renderer.shadowmapenabled = true;     renderer.shadowmapsoft = false;     document.body.appendchild(renderer.domelement); }  function animate() {     requestanimationframe(animate);     (var = 0; < cubes.length; i++) {         cubes[i].rotation.x += 0.01 * i;         cubes[i].rotation.y += 0.02 * i;     }      renderer.render(scene, camera); } 

why shadows doesn't work?

i've looked related questions , three.js references don't understand wrong.

three.js shadows not working properly

how create directional light shadow in three.js?

threejs shadow not rendering

http://threejs.org/docs/#reference/lights/directionallight

http://learningthreejs.com/blog/2012/01/20/casting-shadows/

first of all, add camera controller scene can see doing. can rotate camera different views.

controls = new three.orbitcontrols( camera, renderer.domelement ); 

second, when using jsfiddle, sure link recent version of three.js library.

<script src="http://threejs.org/build/three.min.js"></script> 

for proper resolution, important shadow camera positioned tight around scene. setting following:

light.shadowcameraleft = -20; // or whatever value works scale of scene light.shadowcameraright = 20; light.shadowcameratop = 20; light.shadowcamerabottom = -20; 

for directional lights, "direction to" light's position matters. however, when shadow maps involved, actual position of light important, since controls shadow camera, too.

light.position.set( -60, 20, 100 ); 

here updated fiddle. rotate camera mouse.

http://jsfiddle.net/wp6e3/4/

three.js r.66