CODEWITHSUNDEEP
javascriptthree.js
Ash
Ash

Reputation: 896

Three.js point light shadow not where it shoud be

See this JS fiddle for my code. As you can see, there is a gap between the object and the shadow. This works no problem with spot lights. Anyone have any idea how I can fix this?

Key snippets:

  //MATERIAL
  var material = new THREE.MeshLambertMaterial();
  var terrainMaterial = new THREE.MeshStandardMaterial();

  //GEOMETRY
  var geometry = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);
  var terrainGeometry = new THREE.PlaneGeometry(10000, 10000, 100, 100);

  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -500;
  mesh.position.x = -100;
  mesh.position.y = -50;
  scene.add(mesh);

  var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
  terrain.rotation.x = -90 * (Math.PI / 180);
  terrain.position.y = -100;
  scene.add(terrain);


  // pointlight
  var light = new THREE.PointLight(0xffffff, 2.0, 1200);
  scene.add(light);
  var pointLightHelper = new THREE.PointLightHelper(light);
  scene.add(pointLightHelper);

  light.position.y = 100;
  light.target = mesh;
  light.castShadow = true;
  light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 100, 1, 500, 1000 ) );
  light.shadow.bias = 0.0001;
  light.shadow.mapSize.width = 512;
  light.shadow.mapSize.height = 512;
  scene.add(light);

  mesh.castShadow = true;
  terrain.receiveShadow = true;

Upvotes: 1

Views: 742

Answers (2)

WestLangley
WestLangley

Reputation: 104833

The "shadow camera" is actually 6 perspective cameras, each with a 90-degree field-of-view (fov). So if you want to modify the shadow camera, you must not change the fov.

  light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 90, 1, 500, 1000 ) );

three.js r.92

Upvotes: 1

manthrax
manthrax

Reputation: 5036

Try using a smaller bias value.. try moving the light closer or away and see how that changes things.. try cranking shadow res to 1024 or 2048...

Upvotes: 0

Related Questions