I’m using the WebGLOverlayView
to display a 3D image with animation on a vector map, using the js-three library.
When I set projectionMartrix for PerspectiveCamera by mainCameraRef.current.projectionMatrix.fromArray( transformer.fromLatLngAltitude({ altitude: 0, lat: anchor.lat, lng: anchor.lng}, rotationArray) );
When the anchor is too far from the 3D object location (ex: anchor is in JP and object 3D is in VN), it make the object shape render wrong. When I set the anchor near to 3D object, the shape look OK.
I need to set the anchor far because all my objects’s position is all around the world. Not location on a specific area.
Any solutions for this problem?
Is the problem related only to js-three
library? I couldn’t find any other reference on discourse to that library, if it’s a bug maybe filling an issue on official repo would help ?
1 Like
Thanks for the reply,
I’m not sure if this is a bug, when i follow https://developers.google.com/maps/documentation/javascript/examples/webgl/webgl-overlay-simple, this isnt using js-three library.
Try to set location of object and the anchor const matrix = transformer.fromLatLngAltitude(anchor); camera.projectionMatrix = new Matrix4().fromArray(matrix);
is far, will reproduce the problem.
I think this section of the docs about the importance of the anchor point is perhaps what you’re missing? The anchor must be close to the objects, there isn’t enough numerical precision otherwise.
The anchor specifies the geo-coordinates (lat/lng/altitude) where the origin of the world-space coordinate system is, and you should always define it close to where the objects are placed in the scene…
1 Like
Have a look at the Coordinates
functionality of react-three-map… Rodrigo has put in some serious work in terms of solving map provider overlays, one thing that was considered when working with him was the concept of dividing the view matrix into interperatable chunks derivative of a cube camera projection but this is a really complex solve and would ideally need investment from a map provider eg… Google | Mapbox…
1 Like
Thank you, this is what I’m missing. So any idea for distributing objects globally. I try to dynamic the anchor, but it not working, the object will move along to the anchor location
Thank you bro, I will check it out and see if it helps my case.