Javascript 当它'；s位于另一个挤出几何体后面

我创建了两个并排的挤出几何体（立方体），但旋转场景摄影机时仍然可以看到另一个立方体后面的立方体

前面的立方体变得透明，这应该是为了屏蔽后面的立方体

代码：

var renderer, scene, camera;
function init() {
    // renderer
    renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById('mainCanvas')
    });
    renderer.setClearColor(0x000000); // black
    var gl = renderer.context;
    gl.enable(gl.DEPTH_TEST);

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, 4 / 3, -1, 1);
    camera.position.set(0, 0, -500);
    camera.lookAt(new THREE.Vector3(0, 0, 0));
    var light = new THREE.PointLight(0xffffff, 0.8);
    camera.add(light);
    scene.add(camera);
    //-------------------------------------
    var extrudeSettings = {
        amount : 50
    };
    // a cube in the scene
    var cube = new THREE.Mesh(
            new THREE.ExtrudeGeometry(
                new THREE.Shape([
                    new THREE.Vector2(-20, 20),
                    new THREE.Vector2(20, 20),
                    new THREE.Vector2(20, -20),
                    new THREE.Vector2(-20, -20),
                    new THREE.Vector2(-20, 20),
                ]),
                extrudeSettings),
            new THREE.MeshLambertMaterial({
                color:  0xff0000
            })
    );
    var cube2 = new THREE.Mesh(
            new THREE.ExtrudeGeometry(
                new THREE.Shape([
                    new THREE.Vector2(-60, 20),
                    new THREE.Vector2(-20, 20),
                    new THREE.Vector2(-20, -20),
                    new THREE.Vector2(-60, -20),
                    new THREE.Vector2(-60, 20),
                ]),
                extrudeSettings
            ),
            new THREE.MeshLambertMaterial({
                color: 0x00ff00
            })
    );
    cube2.position.x = -20;

    scene.add(cube, cube2);

    // render
    renderer.render(scene, camera);
    oribitControls = new THREE.OrbitControls( camera);
    oribitControls.addEventListener( 'change', render ); 
    oribitControls.enableDamping = true;
    oribitControls.dampingFactor = 0.25;
    oribitControls.enableZoom = false;
    oribitControls.autoRotate = true;
    oribitControls.autoRotateSpeed = 1.0;
}

function render() {
    renderer.render(scene, camera);
}

和jsfiddle：

Three.js版本：r82

浏览器：Chrome（最新版本）

---

如果有人能指出我遗漏了什么，我将非常感谢。

示例。你想得到这样的结果吗？是的，就是这样，非常感谢，@prisoner849请随意使用它）例如。你想得到这样的结果吗？是的，就是这样，非常感谢，@prisoner849请随意使用）