Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Shadow not showing in ThreeJS


<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 :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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/

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading