# Create a Shadow Effect

{% content-ref url="/spaces/3UKy7VHRJWrNarYaMp13" %}
[Blippar Documentation Centre](https://docs.blippar.com/blippar-documentation-centre/)
{% endcontent-ref %}

## Introduction <a href="#h_01fzzezsjmxr2aycgxdm4emxta" id="h_01fzzezsjmxr2aycgxdm4emxta"></a>

This article provides an overview into the shadow effect that can be created using Blippbuilder

## Scope <a href="#h_01fzzf00s4qy29xwrdnccsyph5" id="h_01fzzf00s4qy29xwrdnccsyph5"></a>

This document includes information on the following:

* Provides an insight into the process of applying **‘Spot Light’** on a 3D model to achieve a shadow effect
* Details of the steps to be followed to position the light to achieve shadows
* Example of a shadow effect

## Process for Applying Spot Light on a 3D Model <a href="#h_01fzzf08hqymsgxbkk7g5y5qwx" id="h_01fzzf08hqymsgxbkk7g5y5qwx"></a>

Follow the steps below to apply **‘Spot light’** on a 3D model:

{% hint style="info" %}
Lighting is essential for achieving shadows and hence this is a pre-requisite for creating the shadow effect. You can choose any lighting to apply. In this article we would be using ‘Spot Light’ as an example to create a **‘Shadow’**
{% endhint %}

## Add 3D Models <a href="#h_01fzzf0dcdcsrf4xf2rbkdrnj7" id="h_01fzzf0dcdcsrf4xf2rbkdrnj7"></a>

* Drag and drop the following 3D shapes on to the canvas:

1. **Cube:** Will act as the base for the sphere
2. **Sphere:** will act as the object under the ‘Spot Light’

{% hint style="info" %}
In this example, a sphere will be used to achieve the shadow effect. The shadow will be casted on the cube which will act as the stage or base for the sphere
{% endhint %}

<figure><img src="/files/qw7GMON7awkjJAoul73i" alt=""><figcaption><p>Add Cube and Sphere</p></figcaption></figure>

## Cube

* Define the position and scale of the cube as follows:

**Position:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 0.00       | -1000.00   | -915.35    |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 100.00     | 100.00     | 1.00       |

&#x20;

* The following image provides an overview of the design canvas if the above settings of position, scale and rotation are defined for a cube. The cube now appears as a stage/base.
* On top of the cube, the sphere can be noticed.

{% hint style="info" %}
The cube is defined by the line in 'Orange'.
{% endhint %}

<figure><img src="/files/szeXbgk5KIIkakbiFWLA" alt=""><figcaption><p>Cube</p></figcaption></figure>

## Sphere

* Define the position and scale of the sphere as follows:

**Position:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 2000.00    | -500.00    | -4000.00   |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 5.00       | 5.00       | 5.00       |

* Now the 3D models are ready for lighting

## Apply ‘Spot Light’ <a href="#h_01fzzf0kw2txcffq62nr0h5sax" id="h_01fzzf0kw2txcffq62nr0h5sax"></a>

Application of lighting is necessary to create shadows. For this example, we would be using ‘Spot Light’ over the 3D model of a sphere to create the shadow effect.

Follow the steps below to apply ‘Spot Light’ on the 3D model of a ‘Sphere’:

Note: we would be using two ‘Spot Lights’ to achieve the shadow effect.

## Add Spot Light 1

* From the left panel of the design canvas, drag-and-drop the ‘Spot Light’ option from the miscellaneous section.
* Define the position, scale and rotation of the ‘Spot Light’ as mentioned below:

**Position:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -2000.00   | 2000.00    | -4000.00   |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 5.00       | 5.00       | 5.00       |

* From the right panel of the design canvas, define the color of the ‘Spot Light’ to blue. You can find this option under the **‘Basic Properties’**

<figure><img src="/files/EjXIN4yDh9KQvwKTWbP0" alt=""><figcaption><p>Spot Light</p></figcaption></figure>

<figure><img src="/files/pkA882KrJ8p9JYcDUI5h" alt=""><figcaption><p>Add Spotlight</p></figcaption></figure>

## Add Spot Light 2

* From the left panel of the design canvas, drag-and-drop the ‘Spot Light’ option from the miscellaneous section.
* Define the position, scale and rotation of the ‘Spot Light’ as mentioned below:

**Position:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 2000.00    | 2000.00    | -4000.00   |

&#x20;

**Rotation:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| -90.00     | 0.00       | 0.00       |

&#x20;

**Scale:**

| **x-axis** | **y-axis** | **z-axis** |
| ---------- | ---------- | ---------- |
| 5.00       | 5.00       | 5.00       |

&#x20;          &#x20;

* From the right panel of the design canvas, define the color of the ‘Spot Light’ to pink. You can find this option under the **‘Basic Properties’**

<figure><img src="/files/cRQWJ75JojdrimP1DSrS" alt=""><figcaption><p>Shadow Effect</p></figcaption></figure>

## Animation <a href="#h_01fzzf0vcng7pf32s0265jt2pa" id="h_01fzzf0vcng7pf32s0265jt2pa"></a>

The shadow effect can be seen as a ‘Black Shadow’ under the pink sphere.

If motion effects of ‘Rotation’ is applied on to the ‘Spot Lights’ the Shadow effect can be visually more appealing.

Example:

Refer image below (Before Animation)

<figure><img src="/files/0kunhaqNaHCCoxbVhHFz" alt=""><figcaption><p>Before Animation</p></figcaption></figure>

Refer image below (After Animation)

<figure><img src="/files/2oZ138uCwlchoG8SFY2v" alt=""><figcaption><p>After Animation</p></figcaption></figure>

{% hint style="info" %}
Shadow casting is dynamically updated to region in front of camera.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.blippar.com/blippbuilder-documentation/advanced-project/create-a-shadow-effect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
