Skip to main content

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.

TypePositionColorIntensity
Ambient#fff2
Directional3 3 7#fff0.6
Directional3 -3 7#fff0.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.

PropertyDescriptionTypeAvailable forDefault
typeLight type.Stringalldirectional
positionThe position of the light. Must be a 3D vector with three values (x y z).Vector3directional, point, spot0 0 5
intensityThe intensity of the light.Hex colorall#fff
colorThe color of the light.Numberall0.6
distanceDistance covered by the light.Numberpoint, spot100
shadowEnable shadow projected by the light.List of key value parameters divided by semi-columndirectional, point, spotmap-size-width: 2048; map-size-height: 2048; camera-near: 0.5; camera-far: 0.5; camera-fov: 50; bias: 0; radius: 1;
helperEnable helper. If you specify a value for this attribute, the value will be the helper color.Attribute onlydirectional, point, spotfalse

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

KeyValueDefault
map-size-widthnumber512
map-size-heightnumber512
camera-nearnumber0.5
camera-farnumber0.5
camera-fovnumber45
biasnumber0
radiusnumber1

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>