Steff: Die Seite wurde neu angelegt: „ ThreeJS - Snippets zentriert === AmbientLight === The AmbientLight applies '''omnidirectional lighting''' on…“

2021-12-30T20:06:13Z

Die Seite wurde neu angelegt: „ ThreeJS - Snippets rahmenlos|zentriert === AmbientLight === The AmbientLight applies '''omnidirectional lighting''' on…“

Neue Seite

[[ThreeJS - Snippets]]

[[Datei:Three.js-3D-Lighting.jpg|rahmenlos|zentriert]]
=== AmbientLight ===
The AmbientLight applies '''omnidirectional lighting''' on all geometries of the scene. Therefore no shadows thrown.
<syntaxhighlight lang="javascript">
// AmbientLight - color, intensity
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(ambientLight)
gui.add(ambientLight,'intensity',0,1).name('AmbientLight')
</syntaxhighlight>

=== DirectionalLight ===
The DirectionalLight will have a '''sun-like effect''' as if the sun rays were traveling in parallel.
<syntaxhighlight lang="javascript">
// DirectionalLight - color, intensity
const directionalLight = new THREE.DirectionalLight(0x00fffc, 0.3)
directionalLight.position.set(1, 0.25, 0)
scene.add(directionalLight)
gui.add(directionalLight,'intensity',0,1).name('DirectionalLight')
</syntaxhighlight>

=== HemisphereLight ===
The HemisphereLight is similar to the AmbientLight but with a '''different color from the sky than the color coming from the ground'''. Faces facing the sky will be lit by one color while another color will lit faces facing the ground.
<syntaxhighlight lang="javascript">
// HemisphereLight - color top, color bottom, intensity
const hemisphereLight = new THREE.HemisphereLight(0xff0000, 0x0000ff, 0.3)
scene.add(hemisphereLight)
gui.add(hemisphereLight,'intensity',0,1).name('HemisphereLight')
</syntaxhighlight>

=== PointLight ===
The PointLight is almost '''like a lighter'''. The light source is infinitely small, and the light spreads uniformly in every direction. You can control that '''fade distance and how fast it is fading''' using the '''distance''' and '''decay''' properties.
<syntaxhighlight lang="javascript">
// PointLight - color, intensity, distance, decay
const pointLight = new THREE.PointLight(0xff9000, 0.5, 10, 2)
pointLight.position.set(1, - 0.5, 1)
scene.add(pointLight)
gui.add(pointLight,'intensity',0,1).name('PointLight')
</syntaxhighlight>

=== RectAreaLight ===
The RectAreaLight works like the '''big rectangle lights''' you can see on the photoshoot set. It's a '''mix between a directional light and a diffuse light'''. You can then move the light and rotate it. To ease the rotation, you can use the lookAt(...) method

<syntaxhighlight lang="javascript">
// RectAreaLight - color, intensity, width, height
const rectAreaLight = new THREE.RectAreaLight(0x4e00ff, 2, 1, 1)
rectAreaLight.position.set(- 1.5, 0, 1.5)
rectAreaLight.lookAt(new THREE.Vector3())
scene.add(rectAreaLight)
gui.add(rectAreaLight,'intensity',0,5).name('RectAreaLight')
</syntaxhighlight>

=== SpotLight ===
The SpotLight works '''like a flashlight'''. It's a cone of light starting at a point and oriented in a direction.

'''Rotating''' our SpotLight is a little harder. The instance has a '''property named target, which is an Object3D'''. The SpotLight is always looking at that target object. Simply create the target and do not forget to add it to the scene, and it should work:

<syntaxhighlight lang="javascript">
// SpotLight - color, intensity, distance, angle (of beam), penumbra (contour diffusion),decay
const spotLight = new THREE.SpotLight(0x78ff00, 0.5, 10, Math.PI * 0.1, 0.25, 1)
spotLight.position.set(0, 2, 3)
spotLight.target.position.x = - 0.75
scene.add(spotLight.target)
scene.add(spotLight)
gui.add(spotLight,'intensity',0,1).name('SpotLight')
</syntaxhighlight>

=== Light Helpers ===
Positioning and orienting the lights is hard. To assist us, we can use helpers. Only the following helpers are supported:
* HemisphereLightHelper
* DirectionalLightHelper
* PointLightHelper
* RectAreaLightHelper
* SpotLightHelper

To use them, simply instantiate those classes. Use the corresponding light as a parameter, and add them to the scene. The second parameter enables you to change the helper's size:
<syntaxhighlight lang="javascript">
const hemisphereLightHelper = new THREE.HemisphereLightHelper(hemisphereLight, 0.2)
scene.add(hemisphereLightHelper)

const directionalLightHelper = new THREE.DirectionalLightHelper(directionalLight, 0.2)
scene.add(directionalLightHelper)

const pointLightHelper = new THREE.PointLightHelper(pointLight, 0.2)
scene.add(pointLightHelper)
</syntaxhighlight>
For the SpotLightHelper, there is no size parameter. Also, after moving the target, you need to call the update(...) method but on the next frame:

For the '''SpotLightHelper''', there is '''no size''' parameter. Also, after '''moving the target''', you need to call the update(...) method but on the next frame:

<syntaxhighlight lang="javascript">
const spotLightHelper = new THREE.SpotLightHelper(spotLight)
scene.add(spotLightHelper)
window.requestAnimationFrame(() =>
{
spotLightHelper.update()
})
</syntaxhighlight>

The '''RectAreaLightHelper''' is even harder to use. Right now, the class isn't part of the THREE variable. '''You must import it''' from the examples dependencies as we did with OrbitControls:

<syntaxhighlight lang="javascript">
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js'
//...
const rectAreaLightHelper = new RectAreaLightHelper(rectAreaLight)
scene.add(rectAreaLightHelper)
</syntaxhighlight>

=== Performance ===
Lights can cost a lot when it comes to performance.

Try to add as few lights as possible and try to use the lights that cost less.

Minimal cost:
* AmbientLight
* HemisphereLight

Moderate cost:
* DirectionalLight
* PointLight

High cost:
* SpotLight
* RectAreaLight

=== Baking Light ===
A good technique for lighting is called baking. The idea is that you bake the light into the texture. This can be done in a 3D software. Unfortunately, you won't be able to move the lights, because there are none and you'll probably need a lot of textures.

Three.js - Lights - Versionsgeschichte

Steff: Die Seite wurde neu angelegt: „ ThreeJS - Snippets zentriert === AmbientLight === The AmbientLight applies '''omnidirectional lighting''' on…“