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! 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 .
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) .
UPDATE:
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.