Rotating the sky shader

My setup is so that the z-axis is pointing up and now the sky is showing underneath my plane.

I tried changing the up value: sky.material.uniforms.up.value = new Vector3( 0, 0, 1 );

But now it’s just a black box.

Does anyone know how to properly rotate the sky shader?

Can you share your code here? If possible, please set up a live example using a service like jsfiddle or codesandox.

Many thank for reaching out @looeee .

I’ve recreated the problem for you in a code sandbox:

I need to be able to rotate the sky so the horizon is in line with the plane.

camera.up = new THREE.Vector3(0, 0, 1);

Are you trying to convert to a Z-UP coordinate system?

Updated codepen:

It seems the inclination and azimuth angles are not correctly interpreted when the up axis is different than (0,1,0). You can still workaround this issue by using negative values in your case.

1 Like

That’s correct. The reason being is because this will be moved onto a mapping/gis context and the z-coordinates in the data I am consuming represent units of measurement above sea level.

Many thanks for pointing this little issue out! :+1: I hope to get this first issue sorted and then move on to the next challenges later on.

I think you should set Object3D.defaultUp rather than camera.up.

However, I think you’ll run into lots of problems like this one. Although it is technically possible to set Z-UP, doing so is not well tested.

You might find it better to convert the coordinates from your data to match three.js instead. At least, that’s what I do in this situation, also dealing with GIS data.

You seem to have made a fix!

What did you change in the code? Was it something in sky.js? I can’t see your changes.

With regards to point conversion that was my ideal to make my life a little easier wrt all this but unfortunately it wasn’t my decision to make :frowning: .

As long as I can get the sky to rotate accordingly the rest of the objects should render with the correct orientation from heronin (I hope) :slight_smile: .


Now I see. Many thanks for your help on this. It’s really appreciated.

1 Like

I didn’t realise that these values were also part of the problem now that I’m playing with them. Thanks for pointing this out man.

I realised by making the theta and phi values negative as well setting the correct up value on sky fixes the issue perfectly:

`var theta = Math.PI * -(effectController.inclination - 0.5);`
`var phi = 2 * Math.PI * -(effectController.azimuth - 0.5);`

It seems to work on my application but not in the code sandbox for some reason.

Thanks again man.