Javascript - Three.js Material und Schatten

Question

Ich habe mich gefragt, was ich falsch mit der Wahl Mesh-Material gemacht habe. Wie Sie sehen:

Die schwarzen sieht gut aus der Schatten ist glatt und richtig. Allerdings, wenn Sie bemerken, die weißen sehen komisch aus und der Schatten ist meiner Meinung nach nicht perfekt. (sehr wahrnehmbar am PFERD)

Für schwarz habe ich MeshPhongMaterial verwendet, für die weißen - MeshBasicMaterial. Seltsame Dinge passieren, wenn ich versuche, MeshBasicMaterial in MeshPhongMaterial oder MeshLambertMaterial zu ändern, meine weißen Zahlen werden schwarz.

Hier ist ein Quellcode: https://fiddle.jshell.net/m4tv0s3p/

Sehr ähnliches Problem: ThreeJS shadow not rendering

Vielleicht eine Lösung vorschlagen kann jemand? oder Workaround?

Answer 1

Auf der renderer Sie fehlen:

renderer.shadowMapType = THREE.PCFSoftShadowMap; 

und auf der light sollten Sie hinzufügen:

spotLight.shadowMapWidth = 2048; 
spotLight.shadowMapHeight = 2048; 

Diese sind für die Version von three.js Sie verwenden (r60), welche ziemlich alt.