How to manage lights

With the tag <aryel-embed-light />, it's possible to manually manage the embedded model's lighting. The lights have to be inserted inside the tag <aryel-embed>. If you insert a light, the default lighting will be overwritten.

Default lights

If custom lights aren’t provided, 3 default lights will be added to the scene.

Type	Position	Color	Intensity
Ambient		#fff	2
Directional	3 3 7	#fff	0.6
Directional	3 -3 7	#fff	0.6

Custom lights

You can customize the lights by adding the shortcode of custom lights inside the aryel-embed tag.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light
        type="directional"
        color="#fefefe"
        intensity=".8"
        position="3 3 0"
    ><aryel-embed-light/>
</aryel-embed>

Properties

This is the list of all the properties of the lights' embed viewer. Each property is a single attribute on the HTML tag. Check the Available for column to verify which property is available for each light type.

Property	Description	Type	Available for	Default
type	Light type.	String	all	directional
position	The position of the light. Must be a 3D vector with three values (x y z).	Vector3	directional, point, spot	0 0 5
intensity	The intensity of the light.	Hex color	all	#fff
color	The color of the light.	Number	all	0.6
distance	Distance covered by the light.	Number	point, spot	100
shadow	Enable shadow projected by the light.	List of key value parameters divided by semi-column	directional, point, spot	map-size-width: 2048; map-size-height: 2048; camera-near: 0.5; camera-far: 0.5; camera-fov: 50; bias: 0; radius: 1;
helper	Enable helper. If you specify a value for this attribute, the value will be the helper color.	Attribute only	directional, point, spot	false

Type

Define the type of light. Accepted values are ambient, directional, point, spot and area.

Ambient light: 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.

Directional light: 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.

Point light: A light that gets emitted from a single point in all directions.

Area light: A light that 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.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light type="directional"></aryel-embed-light>
</aryel-embed>

Position

Define the position of your light.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light position="1 5 3"><aryel-embed-light/>
</aryel-embed>

Intensity

Define the intensity of your light.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light intensity="3"><aryel-embed-light/>
</aryel-embed>

Color

Define the color of your light.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light color="#FFA274"><aryel-embed-light/>
</aryel-embed>

Distance

Defines the distance covered by the light. This property is available for spot and point lights.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light distance="100"><aryel-embed-light/>
</aryel-embed>

Shadow

It enables the shadows casted by the current light. It can be used with all light types except for ambient light which does not cast shadows and area light which is currently not supported.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light
        shadow="map-size-width: 512; map-size-height: 512; camera-near: 0.5; camera-far: 0.5; camera-fov: 45; bias: 0; radius: 1"
    ><aryel-embed-light/>
</aryel-embed>

note

Shadow camera-fov is not available for directional lights.

Available properties

Key	Value	Default
map-size-width	number	512
map-size-height	number	512
camera-near	number	0.5
camera-far	number	0.5
camera-fov	number	45
bias	number	0
radius	number	1

Helper

It enables the light helper. The helper can be used to better comprehend how the current lights is behaving.

<aryel-embed campaign="your-campaign-id">
    <aryel-embed-light helper><aryel-embed-light/>
</aryel-embed>