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

**URL:** <https://discourse.threejs.org/t/spotlight-shines-through-object-although-its-not-transparent-casts-shadows-and-receives-shadows-threejs-v0-130-0/50630>\
**Category:** Questions\
**Tags:** spotlight, positioning\
**Created:** [April 20, 2023, 9:29am UTC](https://discourse.threejs.org/t/spotlight-shines-through-object-although-its-not-transparent-casts-shadows-and-receives-shadows-threejs-v0-130-0/50630 "2023-04-20T09:29:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![perskes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/perskes/32/35562_2.png) [@perskes](https://discourse.threejs.org/u/perskes)\
**Post date:** [April 20, 2023, 9:29am UTC](https://discourse.threejs.org/t/spotlight-shines-through-object-although-its-not-transparent-casts-shadows-and-receives-shadows-threejs-v0-130-0/50630/1 "2023-04-20T09:29:32Z")

</div>

Please watch this GIF to see the problem: [**https://i.imgur.com/6QIqZnc.mp4**](https://i.imgur.com/6QIqZnc.mp4)

Hi,

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: [**https://i.imgur.com/6QIqZnc.mp4**](https://i.imgur.com/6QIqZnc.mp4)

Can you help me solve this problem?

Some additional info:

The renderer with shadowmap settings:

```javascript
// 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](https://threejs.org/editor/), please see here:

[https://i.imgur.com/yvtRmDe.mp4](https://i.imgur.com/yvtRmDe.mp4)