Move a Group n units, SpotLight/Helper in Group moves n*2 units

In this simple Codepen, I have a THREE.Group. Inside that group is a Cube, a SpotLight, and a SpotLightHelper.

Note the crosshairs denoting points on the x axis.

The only thing moving is the group, back and forth between x = -3 and x = 3. However, look how much more the SpotLightHelper inside the Group moves (and possibly the SpotLight, too) as compared to the Cube in the same group. It appears that for every value of x for the Group, the SpotLightHelper moves x*2. It’s the same for any other axis.

WTH is going on here?

1 Like

Your codepen seems to be readonly. To test, log out of your codepen account, then click on the image you posted above. The result is probably not what you wanted to publish.

P.S.: the link you posted in the first line of your post is working.

The embedded pen is added automatically by this site when sharing a link to Codepen, which has editing disabled. I had to delete it and manually add the embed code.

Took me some time and thanks for letting me learn something along the way:

change the following


to this, and you’ll be fine:

scene.add(lightHelper)      //  <== change here


by calling

const lightHelper = new THREE.SpotLightHelper(light)

you’re linking the lightHelper to the light already. If you add the lightHelper to the group, the lightHelper additionally participates in the translation of the group as well, so you’re doing it twice, as you observed.

To find this out, I switched to an OrthographicCamera, to cut out any parallax confusion. I also added non-mandatory parameters to the spotlight creation call

const light = new THREE.SpotLight(0xffa95c, 1, 3, 0.4)

which showed me the spotlight’s light spot on the cube’s top surface, which was correct from the beginning, and was correctly following the group’s translation all along.


All helpers are attached to scene: three.js examples

1 Like

Wow, great catch! Thanks for figuring that out.

1 Like