Sunday, September 27, 2020

ThreeJS what are different light sources



AmbientLight

This light globally illuminates all objects in the scene equally.

This light cannot be used to cast shadows as it does not have a direction.


var light = new THREE.AmbientLight( 0x404040 ); // soft white light

scene.add( light );


AmbientLightProbe

Light probes are an alternative way of adding light to a 3D scene. AmbientLightProbe is the light estimation data of a single ambient light in the scene


Light probes are an alternative way of adding light to a 3D scene. Unlike classical light sources (e.g. directional, point or spot lights), light probes do not emit light. Instead they store information about light passing through 3D space. During rendering, the light that hits a 3D object is approximated by using the data from the light probe.


Light probes are usually created from (radiance) environment maps. The class LightProbeGenerator can be used to create light probes from instances of CubeTexture or WebGLCubeRenderTarget. However, light estimation data could also be provided in other forms e.g. by WebXR. This enables the rendering of augmented reality content that reacts to real world lighting.


The current probe implementation in three.js supports so-called diffuse light probes. This type of light probe is functionally equivalent to an irradiance environment map.


DirectionalLight

A light that gets emitted in a specific direction. This light will behave as though it is infinitely far away and the rays produced from it are all parallel. The common use case for this is to simulate daylight; the sun is far enough away that its position can be considered to be infinite, and all light rays coming from it are parallel.



A Note about Position, Target and rotation

A common point of confusion for directional lights is that setting the rotation has no effect. This is because three.js's DirectionalLight is the equivalent to what is often called a 'Target Direct Light' in other applications.


This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).



// White directional light at half intensity shining from the top.

var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );

scene.add( directionalLight );


HemisphereLight

A light source positioned directly above the scene, with color fading from the sky color to the ground color.


This light cannot be used to cast shadows.



var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );

scene.add( light );



HemisphereLightProbe

Light probes are an alternative way of adding light to a 3D scene. HemisphereLightProbe is the light estimation data of a single hemisphere light in the scene. For more information about light probes, go to LightProbe.





Light

Abstract base class for lights - all other light types inherit the properties and methods described here.



PointLight

A light that gets emitted from a single point in all directions. A common use case for this is to replicate the light emitted from a bare lightbulb.


This light can cast shadows - see PointLightShadow


RectAreaLight

RectAreaLight emits light uniformly across the face a rectangular plane. This light type can be used to simulate light sources such as bright windows or strip lighting.


Important Notes:


There is no shadow support.

Only MeshStandardMaterial and MeshPhysicalMaterial are supported.

You have to include RectAreaLightUniformsLib into your scene and call init().



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


SpotLight

This light gets emitted from a single point in one direction, along a cone that increases in size the further from the light it gets.


This light can cast shadows - see the SpotLightShadow


// white spotlight shining from the side, casting a shadow


var spotLight = new THREE.SpotLight( 0xffffff );

spotLight.position.set( 100, 1000, 100 );


spotLight.castShadow = true;


spotLight.shadow.mapSize.width = 1024;

spotLight.shadow.mapSize.height = 1024;


spotLight.shadow.camera.near = 500;

spotLight.shadow.camera.far = 4000;

spotLight.shadow.camera.fov = 30;


scene.add( spotLight );





Referecens: 

https://threejs.org/docs/#api/en/lights/

 

No comments:

Post a Comment