Question and possible issue with spotLightHelper

Questions
1

Hello,

I am currently working on a relatively complex scene that requires an envCube and a movement of the scene, and I have 2 small dots where I can not find an answer:

I made an very simplified example on jsfiddle which exposes the 2 questions (see comment in js code):
jsfiddle

Question A: I was able to see 2 methods to bind the target of a spotlight, Can you confirm that the operation between SpotLight.target and Object3D.lookAt correspond to my comment in the code, is one more optimized than the other in terms of performance for a total movement of a scene as in my case.

Question B:
We notice that the scene turns, the camera and all the objects are perfectly related to the scene, except for the SpotLightHelper which turns on the opposite … I do not find any solutions, including by adding .update (). Did I miss something or is it a bug?

thx for your time.

I post here before to open any issues on github for the spotLighthelper problem.

Checked on:

Three.js version
  • [ ] Dev
  • [x] r105
  • [ ] …
Browser
  • [ ] All of them
  • [x] Chrome 75.0.3770.100 (Build officiel) (64 bits)
  • [x] Firefox 67.0.4 (64 bits)
  • [ ] Internet Explorer
OS
  • [ ] All of them
  • [x] Windows
  • [ ] macOS
  • [ ] Linux
  • [ ] Android
  • [ ] iOS
2

For a simple rotation, you typically wouldn’t rotate the scene itself, you would simply rotate the camera. You can see here how it works, the only change I made was to the animate() function.

Usually the scene is a fixed object that works as an “anchor” for all your children objects to be placed inside of. If you rotate the scene, it can lead to confusing behavior (as you can see in your original fiddle). I think the skybox is interpreting the rotation in one way, while the spotlight helpers are interpreting it in the opposite direction.

3

Thank you for your answer, I see … I know that most demos use the rotation of the camera, but in this case, if we want to make a rotation of the sky, while having a camera tracking on an object, this requires either to recalculate the textures of the envCube (too heavy), or to modify the CubeTextureLoader at the level of the shader to integrate the rotation … I think that I will look at the 2nd method …

4

Yeah, a skybox as background is basically a cube Mesh with the faces facing inward. It ignores the camera’s translation so that it always feels like you’re looking out from the cube’s center without ever reaching the sides. You can easily create your own:

  • Make your cube slightly bigger than the space occupied in the scene, but not bigger than the camera’s far plane.
  • Set its material.depthWrite: false so it doesn’t get in front of other objects.
  • Set material.side: THREE.BackSide so the faces point inward.
  • You might need to set the cube.renderOrder = -1 so that it’s the first thing that gets rendered.
  • After updating the camera’s position on each frame, move the cube to re-center: cube.position.copy(camera.position);

After that setup, you can easily manipulate the rotation with a simple cube.rotation.y = yyy; without it affecting your scene.

5

Unfortunately I have already tried this method, but I have not managed to integrate it as envMap on the scene through the scene.background, in order to get a reflection / refraction on the objects. that’s why I was trying to go through THREE.CubeReflectionMapping and THREE.CubeRefractionMapping.

The ideal would really be that we can manipulate the rotation of the CubeMap … I will eventually find a viable solution until the method is added.