Теневые артефакты на двухсторонней плоскости

Question

Когда я бросаю свет на двухстороннюю плоскость, я вижу глючный артефакт. Кто-нибудь знает, почему он существует, и что я должен сделать, чтобы избежать этой проблемы? Заранее спасибо!

Я проверил, могу ли я найти эту проблему в другом месте, но на удивление я не мог.

/** 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); 
} 

Вот мой код: http://jsfiddle.net/scjcvx3k/2/. Я попытался включить только тот код, который был релевантен для этого вопроса.

Answer 1

Вы получаете артефакты от самозатенения. У вас есть два варианта. Одним из них является установить

plane.receiveShadow = false; 

Другой установить light.shadowBias.

light.shadowBias = -0.001; 

К сожалению, установка shadowBias может привести к другому артефакту: "Петр панорамирование".

Google эти темы, если вы хотите узнать больше о проблемах.

Обновлено скрипку: http://jsfiddle.net/scjcvx3k/7/

Three.js 71