Lights & Shadows

Learn how to configure lighting, shadows, and environment. This example uses a point light with shadows, a receiving floor, and a cube.

Transport

Remember to include a canvas with id vulfram-canvas in your page.

Key steps

1. Create the camera with a 3/4 angle to see the shadow volume.

2. Add the light with castShadow: true.

3. Configure configureShadows and configureEnvironment.

4. Mark the floor with receiveShadow: true.

Full example

Copy the full example below. In browser mode, use the vulfram-canvas canvas.

ts
Live demo canvas