Rotate a scenes background

Questions
,
1

I have set a background to use THREE.CubeTextureLoader() which works fine.

Now i want to be able to rotate that texture.

If I rotate the scene the texture stays static (whilst the object rotates), so how does one roate the cubemap (but keep the objects still)?

2

What does your code look like? It will be hard to help you if we don’t know how your scene is set up.

3

I am setting my scenes background like so…

scene.background = getCubeTexture();

where

getCubeTexture(){
   let path = "cubemap/";
        let format = '.png';
        let urls = [
            path + 'px' + format, path + 'nx' + format,
            path + 'py' + format, path + 'ny' + format,
            path + 'pz' + format, path + 'nz' + format
        ];
        return new THREE.CubeTextureLoader().load(urls);

}
4

You could rotate only children of the scene

var group = new THREE.Group();
group.add(allObjects);
scene.add(group);
group.RotateX(x);
5

Appologies, perhaps I didnt explain, I dont want to rotate any objects, they should stay still. I only want to be able to rotate the enviornment/cubemap

6

Have you tried Texture.rotation? I haven’t personally tried it on either a CubeMap or scene background, but it may work.

7

thanks for the suggestion, I couldnt get that to work There does appear to be a rotation property on a background, but I dont seem to be able to set it?

8

Sorry for the last answer, I didn’t read Your question carefully enough.
So here is a working demo https://jsfiddle.net/qgu17w5o/81/

look for boxMesh.rotateY(0.5);

I based it on https://github.com/mrdoob/three.js/blob/master/src/renderers/webgl/WebGLBackground.js

2 Likes
9

Hmmm… I haven’t dug deep into this, but could we possibly use that to rotate HDR cube stuff as well (THREE.HDRCubeTextureLoader / THREE.PMREMGenerator / THREE.PMREMCubeUVPacker)? I haven’t found a way to rotate my PMREM HDR lighting, other than re-rendering new HDRs (I often make my own HDRs)…

10

The provided example does not seem to work anymore. Is it still possible to rotate cube texture applied to scene.background?

11

Hello! Thanks for the solution, but this does not correctly work if I pan my camera using orbitcontrols. Is there way to solve this problem?

12

There’s a PR to add this feature to three.js:

It’s run into some trouble, since it was originally rejected and the person who contributed it is either busy or has forgotten about it. I’ve sent them a gentle reminder.

2 Likes
13

Thank you so much!

14

Hello! I created a stackoverflow question about this problem. Can you explain to me whether it is possible to rotate children of the scene, including the camera, so that the controls do not break?

15

On this page here,
https://sbcode.net/threejs/multi-controls-example/
I have multiple controls enabled. OrbitControls, DragControls and TransformControls.
When you left click the background, the scene rotates the background image aswell.
This all done automatically using the orbitcontrols.

Example code,

const loader = new THREE.CubeTextureLoader();
const backGroundTexture = new THREE.CubeTextureLoader().load(["px.jpg", "nx.jpg", "py.jpg", "ny.jpg", "pz.jpg", "nz.jpg"]);
scene.background = backGroundTexture;
16

As I understand it, what people are looking for here is a way to rotate the background (and hence image based lighting) without rotating the objects in the scene. So, for example, you could simulate a sunrise if you have a sky texture and you rotate the environment, perhaps while adjusting the exposure or environment intensity at the same time.

17

FYI I got this to work.

I have a scene lit with an HDR image:

let envMap = pmremGenerator.fromEquirectangular( texture ).texture;
scene.environment = envMap;

then in my render loop i update the following:

scene.rotateY(speed);

I expected this to be an angle but it’s a constant.

Will post an example if ppl want to see it in action.

1 Like
18

please show your workaround :frowning:

19

Rotating the scene’s background is now implemented and will be available with r162:

2 Likes