Make png Image cast Shadow

Question

i am trying to let my clouds cast a Shadow on a Sphere with an Earth texture.

The clouds are a png texture on a sphere with a bigger radius than the earth Sphere. The goal ist to achieve a more or less realistic shadow casting.

I am using receiveShadow: true on my earth material and castShadow: true on the clouds Material.
But i am not sure if a png image can cast a shadow like i want it to.

Also the renderer does have:

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

Right now it looks like this:

This is my code right now:

// 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()

Make png Image cast Shadow

0 Answers