使PNG图像铸造阴影

Question

我试图让我的乌云在带有地球质地的球体上铸造阴影。

云是比地球球更大的球体上的PNG质地。 IST的目标是实现或多或少逼真的影子铸造。

我在地球材料上使用接收 true castshadow：true在云层材料上。
但是我不确定PNG图像是否可以像我想要的那样投射阴影。

同样，渲染器确实有：

renderer.shadowMapEnabled = true
renderer.shadowMapType = THREE.PCFSoftShadowMap

现在看起来像这样：

这是我的代码：

// Objects
const earthGeometry = new THREE.SphereGeometry(1, 32, 32);
const cloudGeometry = new THREE.SphereGeometry(1.03, 32, 32);


// Materials
const earthMaterial = new THREE.MeshStandardMaterial({
    opacity: .8,
    depthWrite: false,
    map: earthTexture,
    bumpMap: bumpMap,
    bumpScale: .05,
    specMap: specMap,
    specular: new THREE.Color("grey"),
    receiveShadow: true
})

const cloudMaterial = new THREE.MeshStandardMaterial({
    map: cloudTexture,
    transparent: true,
    castShadow: true
})


// Mesh
const earth = new THREE.Mesh(earthGeometry, earthMaterial)
const clouds = new THREE.Mesh(cloudGeometry, cloudMaterial)

scene.add(earth, clouds)


// Lights
const directionalLight = new THREE.DirectionalLight("#ffffff", 1)
directionalLight.position.set(3, 0, 0)
directionalLight.castShadow = true;
directionalLight.shadowDarkness = .3;


scene.add(directionalLight)

const ambientLight = new THREE.AmbientLight("#ffffff", .20)
scene.add(ambientLight)


/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
    canvas: canvas,
    alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.shadowMapEnabled = true
renderer.shadowMapType = THREE.PCFSoftShadowMap


/**
 * Animate
 */

const clock = new THREE.Clock()

const tick = () => {
    const elapsedTime = clock.getElapsedTime()

    // Update objects
    earth.rotation.y = elapsedTime * 0.02
    clouds.rotation.y = elapsedTime * 0.03

    // Update Orbital Controls
    controls.update()

    // Render
    renderer.render(scene, camera)

    // Call tick again on the next frame
    window.requestAnimationFrame(tick)
}

tick()