Create a Shadow Effect
Learn how to create a shadow effect using the design canvas
Last updated
Learn how to create a shadow effect using the design canvas
Last updated
This article provides an overview into the shadow effect that can be created using Blippbuilder
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
Follow the steps below to apply ‘Spot light’ on a 3D model:
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’
Drag and drop the following 3D shapes on to the canvas:
Cube: Will act as the base for the sphere
Sphere: will act as the object under the ‘Spot Light’
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
Define the position and scale of the cube as follows:
Position:
x-axis
y-axis
z-axis
0.00
-1000.00
-915.35
Rotation:
x-axis
y-axis
z-axis
-90.00
0.00
0.00
Scale:
x-axis
y-axis
z-axis
100.00
100.00
1.00
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.
The cube is defined by the line in 'Orange'.
Define the position and scale of the sphere as follows:
Position:
x-axis
y-axis
z-axis
2000.00
-500.00
-4000.00
Rotation:
x-axis
y-axis
z-axis
-90.00
0.00
0.00
Scale:
x-axis
y-axis
z-axis
5.00
5.00
5.00
Now the 3D models are ready for lighting
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.
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
Rotation:
x-axis
y-axis
z-axis
-90.00
0.00
0.00
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’
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
Rotation:
x-axis
y-axis
z-axis
-90.00
0.00
0.00
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 pink. You can find this option under the ‘Basic Properties’
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)
Refer image below (After Animation)
Shadow casting is dynamically updated to region in front of camera.
