Lichter mit Materialien in three.js funktioniert nicht richtig

Question

Schließlich brauche ich einen normalen Schatten. Aber der Einsatz von Punkt-/Richtungsleuchten mit Lambert/Phong Materialien bekommen ich kein richtiges Ergebnis:

picture with examples

Wenn i-Punkt-Licht verwenden, um mit Lambert Material, dieses Material reagiert nicht auf Licht (. Pic 1, 2) . Wenn ich Spot-Licht mit Phong-Material verwende, bekomme ich Schatten, wie Muster, nicht glatt (Bild 3, 4). Wenn ich gerichtetes Licht mit Lambert/Phong Material verwende, bekomme ich glatten, aber nicht richtigen Schatten (Bild 5 - 8).

Ich verwende diese Einstellungen für Schatten:

renderer.shadowMap.enabled = true; 
renderer.shadowMapSoft = true; 

renderer.shadowCameraNear = 3; 
renderer.shadowCameraFar = camera.far; 
renderer.shadowCameraFov = 50; 

renderer.shadowMapBias = 0.0039; 
renderer.shadowMapDarkness = 0.5; 
renderer.shadowMapWidth = 1024; 
renderer.shadowMapHeight = 1024; 

Und das für Lichter:

var ambientLight =new THREE.AmbientLight(0x555555); 
scene.add(ambientLight); 

und

var spotLight = new THREE.SpotLight(0xffffff); 
spotLight.position.set(12, 22, -25); 
spotLight.castShadow = true; 
scene.add(spotLight); 

und

var directionalLight=new THREE.DirectionalLight(0xffffff, 0.5); 
directionalLight.position.set(12, 22, -25); 
directionalLight.castShadow = true; 
scene.add(directionalLight); 

Auch verwende ich die gleichen castShadow und receiveShadow Eigenschaften für alle diese Beispiele.

Wenn es benötigen, andere Code kann als Quelltext dieser Seite angeschaut werden:

Spot Light, Lambert Material

Dieser Code das gleiche für alle meine Beispiele, ohne Licht - Materialkombinationen.

Answer 1

Echtzeit-Schatten in Three.js sind im Allgemeinen schwierig. Hier sind einige Grundlagen, um Ihr Beispiel zu verbessern.

Grenze der shadow.camera -frustum:

spotLight.shadow.camera.near = 25; 
spotLight.shadow.camera.far = 50; 
spotLight.shadow.camera.fov = 30; 

Erhöhe die shadow.mapSize:

spotLight.shadow.mapSize.width = 2048; 
spotLight.shadow.mapSize.height = 2048; 

Verwenden shadowBias Artefakte zu reduzieren:

spotLight.shadowBias = -0.003; 

Das Ergebnis ist nicht perfekt, weil jetzt Licht Nähte innen Die Zimmer zeigen sich. Es erfordert mehr Zwicken und Handel ofs, aber vielleicht ist es gut genug für Ihre Bedürfnisse: https://jsfiddle.net/wbrj8uak/8/

---

einfach einen Kommentar hier zu verlassen, in Bezug auf 2pha's aktualisiert Beispiel und warum in Wiederherstellung es:

die Einstellung Kameraposition führt zu einem verschwindenden Schatten im Raum. Das ist sicher verwirrend für das Poster, das einen Schatten im Inneren haben will, deshalb habe ich seinen Code einfach so hinterlassen, wie er ihn geliefert hat.