I can't get any shadow

Questions
1

Hi,
I’ve been looking for a solution for hours, unfortunately without success.
I can’t get a shadow cast from one cube to the other.
Could you please help me? What is wrong with my code?
I have striped it to a minimum and hope that someone can see, what I did wrong.

import * as THREE from 'three';
import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GUI } from './jsm/libs/lil-gui.module.min.js';

let controls, scene, camera, renderer, gui, dirLight1;
let guiExposure = null;

init();

function init() {
  // scene
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xdddddd);

  // camera
  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(220, 0, -50);
  camera.lookAt(new THREE.Vector3(0, 0, 0));


  dirLight1 = new THREE.DirectionalLight(0xffffff, 1)
  dirLight1.position.set(200,200,0);
  dirLight1.castShadow = true;
  scene.add(dirLight1);
  const helper = new THREE.DirectionalLightHelper( dirLight1, 5 );
  scene.add( helper );

  dirLight1.shadow.mapSize.width = 1024;
  dirLight1.shadow.mapSize.height = 1024;
  dirLight1.shadow.camera.near = 2;
  dirLight1.shadow.camera.far = 3000;

  // renderer
  renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('#configRoom'),
    antialias: true,
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.shadowMap.enable = true;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  // controls
  controls = new OrbitControls( camera, renderer.domElement );
  controls.listenToKeyEvents( window ); // optional

  // helpers
  scene.add( new THREE.AxesHelper(50));

  const cubeGeometry = new THREE.BoxGeometry( 200, 10, 200 );
  const cubeMaterial = new THREE.MeshPhongMaterial( { color: '#252a34' } );
  const cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
  cube.receiveShadow = true;
  cube.castShadow = true;
  scene.add( cube );

  const cubeGeometry2 = new THREE.BoxGeometry( 100, 10, 100 );
  const cube2 = new THREE.Mesh( cubeGeometry2, cubeMaterial );
  cube2.position.copy(new THREE.Vector3(0,40,0));
  cube2.receiveShadow = true;
  cube2.castShadow = true;
  scene.add( cube2 );
}

animate();

function animate() {
    renderer.render( scene, camera );
    requestAnimationFrame( animate );
}

Thanks

2

Hi,

You have a typo in your code:

renderer.shadowMap.enable = true;

Should be:

renderer.shadowMap.enabled = true;
2 Likes
3

Oh man, am I stupid.
I’ve been looking for three hours and haven’t seen it.
Thank you so much!

1 Like
4

thanks for the awesome information.