I am trying to add shadows but the floor is not receiving it

Questions
,
1

This is the code

const width = mount.current.clientWidth;
const height = mount.current.clientHeight;

var scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
const camera = new THREE.PerspectiveCamera(60, width / height, 1, 5000);
camera.position.set(0, 200, 300);
let renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 2.3;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.setSize(width, height);

if (mount.current.children.length > 0) {
  mount.current.removeChild(mount.current.children[0]);
}
if (mount.current.children.length === 0)
  mount.current.appendChild(renderer.domElement);

scene.add(new THREE.AxesHelper(500));

const BACKGROUND_COLOR = 0x717171;
scene.background = new THREE.Color(BACKGROUND_COLOR);

//////////////////////////////////////////////////////////////////////////////////////
//Lights

let spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(-50, 50, 50);
spotLight.castShadow = true;
spotLight.shadow.camera.top = 1;
spotLight.shadow.camera.bottom = -2;
spotLight.shadow.camera.left = -2;
spotLight.shadow.camera.right = 2;
spotLight.shadow.camera.near = 0.1;
spotLight.shadow.camera.far = 40;
scene.add(spotLight);

////////////////////////////////////////////////////////////////////////////////////////

//Creating FLoor
var floor = new THREE.PlaneGeometry(1000, 1000, 10, 10);
var material = new THREE.MeshPhongMaterial({
  color: 0x7d7d7d,
  wireframe: false,
});

var finalfloor = new THREE.Mesh(floor, material);
finalfloor.material.side = THREE.DoubleSide;
finalfloor.rotation.x += Math.PI / 2;
finalfloor.receiveShadow = true;
scene.add(finalfloor);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
controls.enableZoom = true;
controls.dampingFactor = 0.1;
controls.rotateSpeed = 0.7;
controls.autoRotate = true;
controls.update();

var animate = function () {
  requestAnimationFrame(animate);
  spotLight.position.set(
    camera.position.x + 10,
    camera.position.y + 10,
    camera.position.z + 10
  );
  renderer.render(scene, camera);
};

var bb = new THREE.Box3();
var vector3 = new THREE.Vector3();
let loader = new GLTFLoader();
loader.load(
  Horse,            //the model
  (gltf) => {
    result = gltf.scene.children[0];
    result.position.set(0, -5, -25);
    bb.setFromObject(gltf.scene);
    bb.getCenter(vector3);
    gltf.scene.position.set(vector3.x, vector3.y - 100, vector3.z);
    gltf.scene.position.multiplyScalar(-1);

    gltf.scene.traverse((n) => {
      if (n.isMesh) {
        n.castShadow = true;
        n.receiveShadow = true;
      }
    });
    scene.add(gltf.scene);
    console.log(gltf.scene);
  },

  (xhr) => {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  }
);
animate();

The model is looking like this

1
1773×556 39.1 KB

I dont understant what im doing wrong here,

2

Have you tried creating a CameraHelper from the shadow camera to make sure that your meshes are within the shadow camera frustum ?

3 Likes
3

Got it, the problem was with the lights shadow