THREE.js: Casting shadows as umbra and penumbra

问题

I'm trying to build a model of the upcoming total solar eclipse on Aug. 21 in THREE.js. Using NASA's SPICE toolkit, I was able to get extremely accurate rectangular geometric coordinates for the Sun and the Moon for each minute of the day, using the J2000 Earth-centered inertial frame.

After setting a DirectionalLight at the location of the Sun and pointing it at Earth, I was able to create a shadow that traverses the earth at the correct time and along the correct map, according to NASA. The trouble is that the shadow is MUCH larger than the small shadow of the moon in the umbra zone. As best I can tell, THREE.js is casting a uniform shadow over both the umbra and the penumbra:

My demo here (Wait about two seconds for the eclipse to start, please.) And here's the problem:

Nice diagram of the umbra and penumbra from this lecture:

I've checked and double-checked the ephemeris data, and I don't believe the problem is that the Moon is too close or too large. I tried swapping out the light source for a SpotLight instead, which has a penumbra setting, but the shadow was extremely pixelated and, based on the official demo, it doesn't appear that the umbra is clearly distinguishable from the penumbra.

I thought the problem might be that the DirectionalLightShadow uses an Orthographic camera, but the grainy shadow I achieved with the SpotLight had the exact same size problem, though grainier.

My code for the directional light is pretty much out of the box:

var sunLight = new THREE.DirectionalLight(0xffffff, 1);
sunLight.decay = 1;
sunLight.intensity = 2;
sunLight.castShadow = true;
sunLight.shadow.mapSize.width = 1024 * 2;
sunLight.shadow.mapSize.height = 1024 * 2;
sunLight.shadow.camera.near = 0;
sunLight.shadow.camera.far = constants.AU * DISTANCE_SCALE * 10;
scene.add(sunLight);
sunLight.target = earth;

Complete source code

I don't understand shadowMaps well, so I'm hoping there's an under-the-hood way in THREE or WebGL to cast a shadow that only completely occludes the light source, as opposed to most of it. I'm not certain that's the problem here, but the resemblance of my shadow to the penumbra is awfully close.

来源：https://stackoverflow.com/questions/45165893/three-js-casting-shadows-as-umbra-and-penumbra