CODEWITHSUNDEEP
three.js
Yatoom
Yatoom

Reputation: 307

Shadow artifacts on double sided plane

When I cast a light on a double sided plane, I see a glitchy artifact. Does anyone know why it is there and what I should do to avoid this problem? Thanks in advance!

I checked if I could find this problem anywhere else, but surprisingly I could not.

Glitchy artifact

/** Plane that causes glitch. */
function addPlane(x, y, z, size) {
  var geometry = new THREE.PlaneGeometry( size, size, 1, 1 );
  var material = new THREE.MeshPhongMaterial({color: 0x0077aa, side: THREE.DoubleSide});
  var plane = new THREE.Mesh(geometry, material);
  plane.castShadow = true;
  plane.receiveShadow = true;
  plane.position.set(x, z, y);
  plane.rotateX(Math.PI * 1.5);
  scene.add(plane);
}

Here is my code: http://jsfiddle.net/scjcvx3k/2/. I tried to put in only the code that was relevant for this question.

Upvotes: 2

Views: 1250

Answers (1)

WestLangley
WestLangley

Reputation: 104823

You are getting artifacts from self-shadowing. You have two options. One is to set

plane.receiveShadow = false;

The other is to set light.shadowBias.

light.shadowBias = -0.001;

Unfortunately, setting shadowBias can result in another artifact: "Peter Panning".

Google these topics if you want to know more about the issues.

Updated fiddle: http://jsfiddle.net/scjcvx3k/7/

three.js 71

Upvotes: 8

Related Questions