CSS, HTML & Javascript mit {stil}

THREEjs RectAreaLight

Canvas WEBGL Licht

Am Schattenwurf sind drei Elemente beteiligt: Der Renderer, der die Berechnungen durchführt, das Licht, das einen Schatten wirft, die Objekte, auf die Licht fällt und die einen Schatten werfen.

Renderer / Lichtquellen Schattenwurf setzen

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

var width = 10;
var height = 10;
var intensity = 1;
var rectLight = new THREE.RectAreaLight( 0xffffff, intensity,  width, height );
rectLight.position.set( 5, 5, 0 );
rectLight.lookAt( 0, 0, 0 );
scene.add( rectLight )

rectLightHelper = new THREE.RectAreaLightHelper( rectLight );
rectLight.add( rectLightHelper );

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

OrbitControls nur um die Y-Achse drehen

controls.minPolarAngle = Math.PI/2;
controls.maxPolarAngle = Math.PI/2;

Objekt bewegen

Maustaste drücken und Ziehen, um die Kamera zu rotieren; Scrollen zum Zoomen
Touchscreen: Ziehen zum Rotieren; Zoomen: zwei Finger-Geste

Shadow Camera

THREE.DirectionalLight, THREE.PointLight und THREE.SpotLight werfen einen Schatten.

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.

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();