Spotlight shines through object although it's not transparent, casts shadows and receives shadows (threejs v0.130.0)

Please watch this GIF to see the problem:


I’m having trouble with a lamp model I made in Blender.

I added a spotlight to it, and it works fine in Three.js, except that the light shines through thin objects instead of stopping like it should. When I move the model and spotlight up, it works better, but I want to find a permanent solution. I want the light to stop when it hits a solid object, and I plan to use bones to move the lamp’s head later, so just repositioning the spotlight above the lamp does not work for me (when I move the top down, it will happen again), but more important: I have no idea what’s going on, and I am really curious.

I made a GIF that shows the problem in Blender and Three.js. There are two spotlights, and the left one doesn’t work right, while the right one does. Here’s the GIF link again:

Can you help me solve this problem?

Some additional info:

The renderer with shadowmap settings:

// Set up the renderer
const renderer = new THREE.WebGLRenderer({ alpha: true, antialiasing: true }); // Create a new WebGL renderer
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

renderer.setSize(sceneContainer.offsetWidth, sceneContainer.offsetHeight); // Set the size to match the scene container
// transparent background
renderer.setClearColor(0xffffff, 0); // Set the background color to white, with 0 opacity

// make overly bright areas look better
renderer.gammaInput = true;
renderer.gammaOutput = true;

The same happens in the three.js editor, please see here: