添加DirectionalLight时渲染器出错

Question

这是我的代码：

function addLights() {
var ambiColor = "#ffffff";
var ambientLight = new THREE.AmbientLight(ambiColor, 0.5);
ambientLight.wrapAround = true;
scene.add(ambientLight);
var directionalLightColor = new THREE.Color(0xffffff);
var directionalLight = new THREE.DirectionalLight(directionalLightColor);
directionalLight.position.set(300, 80, -2000);
directionalLight.castShadow = true;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 1300;
directionalLight.shadow.camera.left = -600;
directionalLight.shadow.camera.right = 600;
directionalLight.shadow.camera.top = 600;
directionalLight.shadow.camera.bottom = -600;

directionalLight.distance = 10;
directionalLight.intensity = 14.0;
directionalLight.shadow.mapSize.height = 1024;
directionalLight.shadow.mapSize.width = 1024;
//camera.add(directionalLight);
};

function init() {

createScene();
createRenderer();
addAureole();
addEarthTexture();
addEarthContour();
addEarthPoints();
addClouds();
addConnector();
addWire();
addLights();

};
function animate() {
requestAnimationFrame(animate);
Render();
};
function Render() {
renderer.autoClear = false;
renderer.clear();
renderer.render(backgroundScene , backgroundCamera );
renderer.render(scene, camera);
};

function onResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = (window.innerWidth / window.innerHeight);
camera.updateProjectionMatrix();
};

window.addEventListener('resize', onResize, false);

如果我添加：camera.add（directionLight）;

0.5s，我的页面工作正常，方向灯正常工作，此后我陷入了TypeError：无法读取未定义的属性“ direction”的情况。而且，在没有定向光的情况下，一切都可以正常工作。谁能告诉我出了什么问题？