So I need to place all objects in scene (including camera) in position of left hand coordinate system (and rotate them, ofc). But three.js using right hand coordinate system. What should I do with camera parameters to make it render properly? Or any other ideas? (without transformation of coordinates to from lhsc to rhcs)
Well, the undoubtedly best approach is the conversion from left-handed to right-handed. Same for changing the up-axis (e.g. z-up to y-up). Everything else (like rotating objects or the scene) is a hack and might produce problems in your app.
Why do you have to do this? Do you mind describing your use case a bit?
1 Like
I actually am in a situation where I NEED a left handed coordinate system.
I’m integrating three.js with maplibre-gl-js. This means three.js’s WebGLRenderer instance is being constructed with canvas and context pointing at existing canvas and context, the ones maplibre-gl-js constructed.
This works great aside from maplibre making use of WebMercator coordinate system, which has the origin on the top left of the map near the north pole with +X being east and +Y being south, and +Z being up. If -Z were up we get back to a right handed coordinate system, so the concept, which works perfectly until now, is to apply a scale of -1 on the Z axis to the three.js Camera. Originally I could just set the camera.scale.z = -1, but when I switched the Camera to a PerspectiveCamera in order to try to use a Raycaster I had to tack on a -1 z scale mat4 mult to the projectionMatrix assignment to get this to work. So, this inversion of the Z axis was sufficient to cause all the inside-out rendered objects to return to being properly rendered, and naturally any 3D objects that I need to appear properly I could flip in the Z axis whenever necessary.
The BIG problem I have now is that the Raycaster doesn’t work with such a hacked left handed coordinate system.
I’m starting to run out of ideas and need to start hacking three.js internals soon to try to get this to work.
react-three-map supports maplibre ootb, it’s a pretty comprehensive 3D library to work on top of (within) mapbox and maplibre canvas contexts…
@Mugen87 Is the issue with placing everything under a new Group with a negative scale on x, and rotation.x = Math.PI*-.5
mainly problematic because of the negative scale?
Curious what issues this creates…
I would avoid negative (and non-uniform) scale whenever possible side it has side effects which are hard to understand and track. E.g. it can lead to non-decomposable world matrices which breaks a lot of stuff.
2 Likes
Thank you for linking to react-three-map. It could be a good framework for me to align to. Meanwhile I was able to hack a plain three instance to work piggybacking off of the maplibre camera. the math libraries used are obviously completely incompatible, (as is the handedness of the space) but inverting the Z axis gets me most of the way there. the important thing I had to work out was some simple operations to do with the pilfered projection-view matrix. I could manually reconstruct the raycaster’s vectors. It’s definitely not perfect. I try to stay away from react as it can sometimes interfere with building optimized behaviors.
If nothing else it may be a good source to use to learn how to do raycasting. Oh, actually I see, this looks to be a similar approach as I took. simplify raycaster calculations · RodrigoHamuy/react-three-map@bd62ef9 · GitHub It probably suffers from the same inaccuracy problem… There is some discrepancy in play there.
Hehe this is like watching the launch of an ill fated voyage. May your left handed fields of green be fruitful!