Wie funktionieren Schatten in THREE.js r75?

Question

Ich arbeite an einem Tutorial für Three.js und in einem Beispiel, präsentiert es die Konzepte von Schatten, die durch Methoden wie verwendet werden können: castShadow, receiveShadow und shadowMapenabled auf True festlegen.

Der Beispielcode ist jedoch für Three.js r69. Zum Zeitpunkt dieser Frage ist Three.js bei r75 und dieser Code zum Casting von Schatten funktioniert nicht.

Außerdem enthält die aktuelle Three.js-Dokumentation keine Informationen zu shadowMapenabled oder shadowMap.enabled oder den anderen genannten Methoden.

Vorschläge zur Lösung?

Answer 1

Einige der Shadow-Map-Eigenschaften wurden in den letzten Versionen umbenannt, aber sie funktionieren grundsätzlich gleich.

den Renderer für Shadow-Maps einrichten (und die mehr Rechen teuer Schatten Kartentyp Auswahl):

var renderer = new THREE.WebGLRenderer(); 
renderer.shadowMap.enabled = true; 
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap 

das Licht einrichten (beachten Sie, wie es funktioniert auch mit THREE.PointLight):

var light = new THREE.PointLight(0xffffff, 1, 100); 
light.position.set(0, 12, 0); 
light.castShadow = true;   // default false 
light.shadow.mapSize.width = 1024; // default 512 
light.shadow.mapSize.height = 1024; // default 512 
light.shadow.camera.near = 2;  // default 0.5 
light.shadow.camera.far = 100;  // default 500 
//light.shadow.camera.left = 500 // Not sure about this one + 
            // right, top and bottom, Do they still do anything? 
scene.add(light); 

Sie werden über alle diese API-Änderungen benachrichtigt, wenn Sie Ihre Konsole überprüfen, wenn Sie versuchen, die in der aktuellen Dokumentation angegebenen Eigenschaften zu verwenden.

Sie Objekte erstellen, die Schatten wirft und erhält die gleiche wie zuvor:

//Creating box 
var boxGeometry = new THREE.BoxGeometry(1, 1, 1); 
var boxMaterial = new THREE.MeshPhongMaterial({ color: 0xdddddd, specular: 0x999999, shininess: 15, shading: THREE.FlatShading }); 
var box = new THREE.Mesh(boxGeometry, boxMaterial); 
box.castShadow = true; 
scene.add(box); 

creating plane 
var planeGeometry = new THREE.PlaneGeometry(20, 20, 32, 32); 
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0x00dddd, specular: 0x009900, shininess: 10, shading: THREE.FlatShading }) 
var plane = new THREE.Mesh(planeGeometry, planeMaterial); 
plane.receiveShadow = true; 
scene.add(plane); 

das Flugzeug unter der Box platzieren und es wird einen Schatten erhalten.

Hier ist ein funktionierendes codepen example

EDIT In der aktuellen Version von Three.js, muss die Szene mindestens zweimal für den Schatten zu erbringenden zu zeigen.

DREI.js r75.

Answer 2

Hier ist eine der einfache Code für Schatten in Three.js .Auch enthielt die Schatten Kamera Helfer var light = new THREE.SpotLight(0xFFAA55); light.castShadow = true; light.position.set(1, 3, 5); light.shadowCameraNear = 0.5; scene.add(light); helper = new THREE.CameraHelper(light.shadow.camera); scene.add(helper);

code