ThreeJS shadows do not function as expected

Question

I am having a simple three.js scene and have added some spheres. I want to achieve a simple lighting and shadowing effect but I get strange dark shapes on my spheres.

I guess something is wrong with my settings : jsFiddle

this is the core of this simple piece of code :

// renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.physicallyBasedShading = true;
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.shadowMapEnabled = true; 
    renderer.shadowMapSoft = true; 
    renderer.shadowCameraNear = 0.1;
    renderer.shadowCameraFar = 1000;
    renderer.shadowCameraFov = 100;
    renderer.shadowMapBias = 0.0039;
    renderer.shadowMapDarkness = 0.5;
    renderer.shadowMapWidth = 1024;
    renderer.shadowMapHeight = 1024; 
    document.body.appendChild( renderer.domElement );

    // scene
    scene = new THREE.Scene();

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 150, 50, 150 );

    // controls
    controls = new THREE.OrbitControls( camera );
    // lights
    var light = new THREE.SpotLight( 0xF5F6CE, 1 );
    light.position.set( 300, 300, 60 );
    light.castShadow = true;
    light.shadowMapWidth = 1024;    // power of 2
    light.shadowMapHeight = 1024;

    light.shadowCameraNear = 200;   // keep near and far planes as tight as possible
    light.shadowCameraFar = 500;    // shadows not cast past the far plane
    light.shadowCameraFov = 20;
    light.shadowBias = -0.00022;    // a parameter you can tweak if there are artifacts
    light.shadowDarkness = 0.8;

    light.shadowCameraVisible = true;
    scene.add( light );

    // axes
    scene.add( new THREE.AxisHelper( 200 ) );


    for (var x = 0; x < 3; x++) {
        for (var y = 0; y < 3; y++) {
            for (var z = 0; z < 3; z++) {
                var sphere = new THREE.Mesh(new THREE.SphereGeometry(10,32, 32), new THREE.MeshPhongMaterial({ color: "#FFFF00", side: THREE.DoubleSide,     })); // with MeshLambertMaterial still not working
                sphere.position.set(20*x, 20*y, 20*z); 
                castShadow = true; 
                sphere.castShadow = true;
                sphere.receiveShadow = true ;
                scene.add(sphere);
            }
        }
    }

Answer 1

The blackish artifacts are coming from the two-sidedness of the spheres combined with shadow mapping.

Remove side: THREE.DoubleSide from their material definition and you should be good.

http://jsfiddle.net/Us54P/331/

---

You can also get different results with tweaking the shading parameters, for example, you can add renderer.shadowMapType = THREE.PCFSoftShadowMap;. See here: http://jsfiddle.net/Us54P/332/

---

Could also be a bug (or a debugging feature), because it disappears when you disable light.shadowCameraVisible = true;: http://jsfiddle.net/Us54P/334/