---

You can use three.js to add shadows to your aircraft or other object. However, because shadows are not enabled by default, you will have to add several lines to your code. Also, you will want to prevent certain parts, such as glass parts and the propeller disk from casting shadows.

By default, three.js objects do not cast shadows. This is because shadows are not always needed and because adding shadows can slow execution speed. Thus, your first steps are to tell the renderer to enable shadows and what method to use. Assuming you have already defined your renderer, here is sample code for doing so:

	renderer.shadowMap.enabled = true;
	renderer.shadowMap.autoUpdate = true;
	renderer.receiveShadow = true;	
	renderer.shadowMap.type = PCFSoftShadowMap;

The default shadowMap.type is PCFShadowMap. PCFSoftShadowMap yields a slightly better result. The other types of Shadow Maps are the BasicShadowMap (most basic) and the VSMShadowMap (most complex).

In order to use shadows, you need to use a light which casts shadows, such as a directional light. You then need to add several commands to define the resolution and area covered. Here is some sample code:

let	LgtClr = 0xffffff;				// Light color
let	LgtInt = 1;					// Light intensity (0 to 1)
let	LgtDst = 1000;					// Light distance
let	ObjSiz = 25;					// Object size (radius)
***
const	DirLight = new DirectionalLight(LgtClr, LgtInt);
	DirLight.castShadow = true;
	DirLight.target.position.set(0,0,0);		// Location of the object
	DirLight.shadow.bias = 0.00001;			// Adjust to eliminate lines and gaps
	DirLight.shadow.mapSize.width = 8192;		// Resolution of shadow
	DirLight.shadow.mapSize.height = 8192;
	DirLight.shadow.camera.near = 0.001;
	DirLight.shadow.camera.far = LgtDst+ObjSiz;
	DirLight.shadow.camera.left = -ObjSiz;
	DirLight.shadow.camera.right = ObjSiz;
	DirLight.shadow.camera.top = ObjSiz;
	DirLight.shadow.camera.bottom = -ObjSiz;
	DirLight.position.z = LgtDst;
	scene.add(DirLight);

You will probably have to experiment with these settings. My big mistake was setting shadow.camera.far to a value that we less than the distance to the light. The example above should eliminate that problem.

For a more well-defined shadow, you want to

• Set the light as close as possible to the object
• Set the ObjSiz as small as possible (but big enough to case a shadow on the whole object)
• Increase the mapSize (but not so big that it degrades performance)

Finally, you will probably have to experiment with different values for shadow.bias. You should use extremely small values, around .0001 to .00001. They can be positive or negative. If the value is too far in one direction, there will be interference lines. Too far in the other direction and there will be gaps.

You also need to enable the meshes in the gltf file to make and receive shadows. However, you will want to exclude transparent meshes. Here is an example:

let	fname = "aircraft.glb";
***
gltfLoader.load(fname, function (gltf) {
	gltf.scene.traverse(function (child) {
		if (child.isMesh) {
			child.castShadow = true;
			child.receiveShadow = true;
		}
		if (
			child.name == "propeller" ||
			child.name == "canopyglass")
		{
			child.castShadow = false;
			child.receiveShadow = false;
		}
	});
***

If done correctly, the meshes within your gltf file will cast and receive some impressive shadows.

SimonDev - Three.js Shadows Explained | Tutorial for Beginners! (JavaScript)