Please watch this GIF to see the problem: 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
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: