THREEjs: Licht und Schattenwurf

Licht

Nur DirectionalLight, PointLight und SpotLight werfen einen Schatten. Es gibt seit kurzem auch ein THREE.RectAreaLight, aber RectAreaLight wirft keinen Schatten.

HemisphereLight leuchtet mit einer Farbe für den Himmel und einer für den Boden.

{
   const skyColor = "skyblue";         // helles Himmelblau
   const groundColor = "forestgreen";  // Grün
   const intensity = 1;
   const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
   scene.add(light);

}

Spotlight ist eine Punktlichtquelle mit einem inneren und einem äußeren Kegel, zwischen denen das Licht mit voller Intensität bis Zero strahlt.

{
   const spotLight = new THREE.SpotLight(0x999999);
   spotLight.position.set (200,500,400);
   scene.add (spotLight);
}

Renderer / Lichtquellen Schattenwurf setzen

let renderer = new THREE.WebGLRenderer({canvas, antialias:true});
renderer.shadowMap.enabled = true;

const mainLight = new THREE.DirectionalLight( color, intensity );
mainLight.castShadow = true;

const mesh = new THREE.Mesh(planeGeo, planeMat);
mesh.rotation.x = Math.PI * -.5;
mesh.receiveShadow = true;

Shadow Camera

DirectionalLight hat eine ShadowCamera, und der Schatten eines Objekts liegt nur innerhalb des Frustums der ShadowCamera. Darum wirkt der Schatten bei einigen Einstellungen der Lichtquelle wie abgeschnitten.

Weil bei einem DirectionalLight alle Lichtstrahlen parallel laufen, hat DirectionalLight eine orthografische Kamera als Schattenkamera.

Orthografische Kameras definieren ihr Frustum (eigentlich ein Quader) über left, right, top, bottom, near, far und zoom.

const left = -50;
const right = 50;
const top = 50;
const bottom = -50;
const near = 0.5;
const far = 200;

mainLight.shadow.camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );

Mesh Eigenschaften

Zugriff auf Eigenschaften des importieren Objekts

Obwohl das Objekt mitsamt Texturen und Animationen in der glb-Datei importiert wird, lassen sich alle Elemente des Objekts erreichen.

Der gltf-Mixer steuert das Playback der Animation:

const mixer = new THREE.AnimationMixer( model );
action.setLoop( );

Die Animation nach einem Durchlauf anhalten

action.setLoop( THREE.LoopOnce );

Die Dauer der Animation bestimmen – z.b. 22 Sekunden

action.setDuration(22).play();