THREE.js中的奇怪重叠渲染（以及一些阴影问题）

Question

这是我第二次涉足THREE.js的世界，第一次是短暂的。我只是设置这个场景来尝试一些事情。它是一个扁平的盒子网格，上面有三个盒子网格。出于某种原因，顶部的框被渲染在地面网格的某些多边形后面。任何人都知道为什么会这样？它是否与场景的比例有关，或者我缺少一些设置？感谢。

虽然我有你，有没有人知道网格为什么不在地面网格上投射定向光影？

小提琴：http://jsfiddle.net/k8E43/1/

var scene, camera, renderer;
var material;
var player, ground, mesh1, mesh2;
var directionalLight, spotLight, ambientLight;

init();
animate();

function init() {

    renderer = new THREE.CanvasRenderer();
    renderer.shadowMapEnabled = true;
    renderer.shadowMapSoft = true;
    renderer.setSize( window.innerWidth, window.innerHeight );

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.x = 0;
    camera.position.y = 450;
    camera.position.z = 750;
    camera.lookAt( new THREE.Vector3( 0, 150, 0 ) );

    material = new THREE.MeshLambertMaterial( { color: 0xffffff } );

    // Meshes

    player = new THREE.Mesh( new THREE.BoxGeometry( 70, 160, 70 ), material );
    player.position.y = 80;
    player.castShadow = true;
    player.receiveShadow = true;
    scene.add( player );

    ground = new THREE.Mesh( new THREE.BoxGeometry( 1000, 10, 600 ), material );
    ground.position.y = -5;
    ground.receiveShadow = true;
    scene.add( ground );

    mesh1 = new THREE.Mesh( new THREE.BoxGeometry( 100, 40, 100 ), material );
    mesh1.position.x = -150;
    mesh1.position.y = 20;
    mesh1.position.z = 100;
    mesh1.castShadow = true;
    mesh1.receiveShadow = true;
    scene.add( mesh1 );

    mesh2 = new THREE.Mesh( new THREE.BoxGeometry( 100, 200, 100 ), material );
    mesh2.position.x = 150;
    mesh2.position.y = 100;
    mesh2.position.z = -100;
    mesh2.castShadow = true;
    mesh2.receiveShadow = true;
    scene.add( mesh2 );

    // Lights

    directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.x = -1000;
    directionalLight.position.y = 500;
    directionalLight.position.z = -1000;
    directionalLight.target.position.x = 1000;
    directionalLight.target.position.y = -500;
    directionalLight.target.position.z = 1000;
    directionalLight.castShadow = true;
    scene.add( directionalLight );

    ambientLight = new THREE.AmbientLight( 0x404040 );
    scene.add( ambientLight );

    document.body.appendChild( renderer.domElement );

}
var lightIncreasing = false;
function animate() {

    requestAnimationFrame( animate );

    renderer.render( scene, camera );

}