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.
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.
group.add(cube)
group.add(light)
scene.add(lightHelper) // <== change here
scene.add(group)
Explanation:
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.