Luces

Starter pack

En gr谩ficos 3D, las luces se utilizan para iluminar objetos en la escena. Pueden usarse para simular la luz proveniente del sol, una l谩mpara o cualquier otra fuente de luz.

Ejecuta el c贸digo inicial:

Escena sin luces

Como puedes ver, la escena est谩 completamente oscura.

Esto se debe a que a煤n no hemos a帽adido ninguna luz y los materiales utilizados son <meshStandardMaterial />.

Vamos a descubrir los diferentes tipos de luces disponibles en Three.js.

Luz ambiental

El tipo de luz m谩s simple es la luz ambiental. Ilumina todos los objetos en la escena por igual, independientemente de su posici贸n u orientaci贸n.

La propiedad intensity define el brillo de la luz. El valor por defecto es 1:

<ambientLight intensity={0.5} />

Luz ambiental

La propiedad color define el color de la luz. El valor por defecto es #ffffff (blanco):

<ambientLight intensity={0.5} color={"royalblue"} />

Luz ambiental

Luz direccional

Una luz direccional es una luz que est谩 infinitamente lejos.

Ilumina todos los objetos en la escena desde una direcci贸n espec铆fica.

La direcci贸n de la luz se define por sus props position y target.

Como el valor predeterminado de target es (0, 0, 0), podemos usar solo la prop position para definir la direcci贸n de la luz.

<directionalLight position={[3, 3, 3]} intensity={0.5} />

Al igual que la luz ambiental, tiene una prop color y una prop intensity.

Directional light

Intenta cambiar el cubo a blanco y agregar m煤ltiples luces direccionales con diferentes colores para ver c贸mo interact煤an con 茅l:

End of lesson preview

To get access to the entire lesson, you need to purchase the course.