Spot.Light in Three.js。错误的区域和阴影

Question

我是Three.js和OpenGL的新手。所以我无法理解灯光。我将SpotLight添加到我的场景中，如下所示：

var light = new THREE.SpotLight(0xffff00);
light.position.set( 1.5, 5.5, 0.9 );
light.shadowCameraVisible = true;
light.shadowDarkness = 1;
light.intensity = 2;
light.castShadow = true;
light.shadowCameraNear = 0.1;
light.shadowCameraFar = 50;
light.target = new THREE.Object3D();
light.target.position.set(5.5, 5.5, 0);
scene.add(light);

我在WebGLRenderer打开阴影贴图调试，并在屏幕上看到以下图片：

如果我在板条箱后面飞行，我只会在光源平截头体的“红色”区域看到阴影。在“黄色”区域没有阴影，看起来非常糟糕（请看下一个屏幕截图）。 '.castShadow'和'.receiveShadow'属性设置为'true'。

帮助我理解我做错了什么。也许我不了解SpotLight源或影子机制。我会很感激任何建议。感谢。