```
// initialization
const renderer = new THREE.WebGLRenderer()

// setting type
renderer.shadowMap.enabled = true;
```

```
// initialization
const light = new THREE.DirectionalLight(color, intensity);

// enabling casting shadows
light.castShadow = true;
```
Here, the constructor for `DirectionalLight` takes the following parameters:

* The `color` of the light is in hexadecimal format.
* The `intensity` of the light, which is of type `float`.

The next step is to choose the objects that will cast shadows and those that will receive shadows. This is achieved by tampering with the `castShadow` and `receiveShadow` properties of the object.

```
// this object will cast and receive shadows
shape_one.castShadow = true;
shape_one.receiveShadow = true;

// this object will cast shadows but not receive them
shape_two.castShadow = true;
shape_two.receiveShadow = false;
```
> **Note:** Only the lights that have a direction associated with them can cast shadows. Lights such as Ambient light and Hemisphere light do not cast shadows.



<html>
	<head>
		<title>THREE Shadows</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
		<script type="importmap">
		{
			"imports": {
			"three": "https://unpkg.com/three/build/three.module.js"
			}
		}
		</script>
		<script type="module">

			import * as THREE from 'three';
			import { OrbitControls } from 'https://unpkg.com/three/examples/jsm/controls/OrbitControls.js';

			// scene
			const scene = new THREE.Scene();

			// camera
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.set(0,6,10);

			// renderer
			const renderer = new THREE.WebGLRenderer();

			// enabling shadows
			renderer.shadowMap.enabled = true;
    		renderer.shadowMap.type = THREE.BasicShadowMap;

			document.body.appendChild(renderer.domElement);
			renderer.setSize(window.innerWidth, window.innerHeight);

			// orbit controls
			const controls = new OrbitControls(camera, renderer.domElement);

			// plane geometry
			const geometryP = new THREE.PlaneGeometry(10, 10);
			const materialP = new THREE.MeshStandardMaterial({color:0xffffff})
			const plane = new THREE.Mesh(geometryP, materialP);

			plane.castShadow = false;
			plane.receiveShadow = true;
			plane.rotation.x = -Math.PI / 2;
			scene.add(plane);

			// sphere geometry
			const geometryS = new THREE.SphereGeometry(2, 32, 32);
			const materialS = new THREE.MeshStandardMaterial({
				color:0xffffff,
				wireframe: true,
			});

			const sphere = new THREE.Mesh(geometryS, materialS);
			sphere.position.set(0,3,0);
			sphere.castShadow = true;
			scene.add(sphere);

			// light
			let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
    		light.position.set(20, 100, 10);
			light.target.position.set(0, 0, 0);
			light.castShadow = true;
			scene.add(light);
			
			// rendering function
			function animate() {	
				requestAnimationFrame(animate);
				controls.update();
				renderer.render(scene, camera);
			};

			animate();

		</script>
	</body>
</html>

codemirror

How to cast shadows in three.js

Enable shadows in three.js by configuring renderer shadowMap, setting light castShadow, and adjusting object castShadow and receiveShadow properties.

How to cast shadows in three.js

Enable shadows

Code example

Code explanation