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
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)