three.js light reuse bug

lastest pre-built dev version of three.js

by Herst

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
    overflow: hidden;
}

JavaScript

var camera, renderer, controls;
var normalObj, specialObj;
var mainScene, earlyScene;
var light1, light2;

init();
render();

function init() {

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(150, 450, 450);

    mainScene = new THREE.Scene();
    earlyScene = new THREE.Scene();

    normalObj = new THREE.Mesh(
        new THREE.BoxGeometry(200, 200, 200),
        new THREE.MeshLambertMaterial({
            color: 0xff0000
        })
    );
    normalObj.translateY(50);

    specialObj = new THREE.Mesh(
        new THREE.PlaneGeometry(500, 500),
        new THREE.MeshLambertMaterial({
            color: 0x0000ff,
            depthWrite: false,
            side: THREE.DoubleSide
        })
    );
    specialObj.rotation.x = -Math.PI / 2

    mainScene.add(normalObj);
    earlyScene.add(specialObj);

    light1 = new THREE.AmbientLight(0x707070);
    mainScene.add(light1);
    earlyScene.add(light1);
    
    light2 = new THREE.DirectionalLight(0x8f8f8f);
    light2.position.set(1, 1, 1).normalize();
    mainScene.add(light2);
    earlyScene.add(light2);

    renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0x5f5f5f);
    renderer.autoClear = false;

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    document.body.appendChild(renderer.domElement);
}

function render() {

    requestAnimationFrame(render);

    renderer.clear();
    renderer.render(earlyScene, camera);
    renderer.render(mainScene, camera);
}