Integration with Google Maps WebGL (frameloop & interaction questions) #2311
Unanswered
neil-morrison44
asked this question in
Q&A
Replies: 1 comment 1 reply
-
@neil-morrison44 hey I was trying to setup react three fiber with google maps, it would really help me a lot, if you can share your implementation. |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
I've been following along this: https://developers.google.com/codelabs/maps-platform/webgl#3 but converting it for react-three-fiber.
I've got it to the point where I can get arbitrary (static) react-three-fiber elements rendering where I want them on my map, which is great.
However, there's two questions I've got:
Question 1:
frameloop="never"
webGLOverlayView.requestRedraw()
which I can fire from within the react-three-fiber treeframeloop="demand"
where I know the state is invalid & can tell the google map it should render a frameinvalidate
things function whenframeloop="never"
webGLOverlayView.requestRedraw()
, but I'm not sure if that's the best wayQuestion 2:
onClick
etc don't seem to be workingthing (see https://developers.google.com/codelabs/maps-platform/webgl#6 )
EDIT:
Looks like it probably is google maps catching the click & preventing it from reaching the canvas - I can probably set up a listener on the maps side if there's a way to manually send the event down to react-three-fiber though?
EDIT EDIT:
onCreated: ({ events }) => events.connect?.(map.getDiv()),
to have R3F listen on something which actually gets clicked etctransformer.fromLatLngAltitude()
returns aprojectionMatrix
which I apply to the (manual) camera viacamera.projectionMatrix = new THREE.Vector4().fromArray(matrix)
, but the raycaster needs the camera to have itsworldMatrix
set correctly - it doesn't look like there's any way to back-convert fromprojectionMatrix
toworldMatrix
?Incase this is useful to anyone else I got it working through roughly via these steps (which might be completely wrong):
createRoot
with google's canvas - configured with google's WebGLRenderingContextscene
,camera
&advance
fromuseThree()
and sets up a function onwebGLOverlayView.onDraw
in auseEffect
to render alongside when the map rendersBeta Was this translation helpful? Give feedback.
All reactions