<style>
  body {
    margin: 0;
  }
</style>

<script
  async
  src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.150.1/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.150.1/examples/jsm/"
    }
  }
</script>

<script type="module">
  import * as THREE from 'three'
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

  const scene = new THREE.Scene()
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  )

  const renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)
  document.body.appendChild(renderer.domElement)
  

  const controls = new OrbitControls(camera, renderer.domElement)

  const geometry = new THREE.BoxGeometry(1, 1, 1)
  const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 })
  const cube = new THREE.Mesh(geometry, material)
  cube.castShadow = true
  scene.add(cube)

  const light = new THREE.DirectionalLight(0xffffff, 1)
  light.castShadow = true
  scene.add(light)
  light.position.z = 2
  light.position.y = 3
  camera.position.z = 5

  
  const gg = new THREE.BoxGeometry(5, 0.5, 10)
  const gm = new THREE.MeshStandardMaterial({ color: 0x0000ff })
  const ground = new THREE.Mesh(gg, gm)
  ground.recieveShadow = true
  ground.position.y = -3
  scene.add(ground)j
  renderer.shadowMap.enabled = true

  function animate() {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
    cube.rotation.x += 0.01
    cube.rotation.y += 0.01
  }
  animate()
</script>

Cube is not casting shadow on ground. Please help me. The cube, light and ground has right settings. but even it is not working. How to fix it? I added renderer shadowMap. Then added castshadow to light and cube. and lastly recieve shadow to ground. i tried all tutorials but didn’t worked.

>Solution :

There are three issues in your code:

• You are missing renderer.shadowMap.enabled = true which globally enables shadows.
• It should be receiveShadow not recieveShadow (typo).
• scene.add(ground)j produces a runtime error. The j needs to be deleted.

Working code: https://jsfiddle.net/fdckrq3x/