Error with three different spotlights in three.js 159

Questions
1

Hi,

I have a 3D scene created with Three.js version 159 and in this scene I added three different spotlights.

        const spotLightOne = new THREE.SpotLight(0xfff5bc);
	spotLightOne.name = 'spotLightOne';
	spotLightOne.intensity = 3;
	spotLightOne.target.position.set(-3.5, 0, 2);
	spotLightOne.position.set(-3.5, 2, 1);
	spotLightOne.penumbra = 0.3;
	scene.add(spotLightOne, spotLightOne.target);

	const spotLightTwo = new THREE.SpotLight(0xfff5bc);
	spotLightTwo.name = 'spotLightTwo';
	spotLightTwo.intensity = 3;
	spotLightTwo.target.position.set(0.5, 0, -0.5);
	spotLightTwo.position.set(0, 2, -0.5);
	spotLightTwo.penumbra = 0.1;
	scene.add(spotLightTwo, spotLightTwo.target);

	const spotLightThree = new THREE.SpotLight(0xfff5bc);
	spotLightThree.name = 'spotLightThree';
	spotLightThree.intensity = 3;
	spotLightThree.target.position.set(-3, 0, -2);
	spotLightThree.position.set(-3, 2, -2);
	spotLightThree.penumbra = 0.3;
	scene.add(spotLightThree, spotLightThree.target);

With these 3 spotlights I get the following error: Uncaught TypeError: Cannot read properties of undefined (reading ‘setFromMatrixPosition’)

When I use 2 spotlights I don’t get the error, also important to note is that I get this error only in version 159, not in older versions. Can someone explain me why this is happening?

Thanks!

2

I’m unable to reproduce the issue, see three.js spot light test - JSFiddle - Code Playground.

Do you mind updating the fiddle so the runtime error occurs?

1 Like
3

ah okay! Hadn’t tried that yet since we use our own viewer setup. Thanks anyway!