You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey all,
Is there any way to use react three fiber in conjunction with googlemaps/three library, the latter takes in a scene object to add an overlay on top of google map.
If i render the objects in Canvas since r3f automatically sets up the renderer and scene, by using useThree inside it feels like I am doing something wrong.
Any help or direction in this matter will be greatly appreciated
This is a simple example on how the library uses three js to render an overlay.
import*asTHREEfrom"three";import{ThreeJSOverlayView,latLngToVector3}from"@googlemaps/three";// when loading via UMD, remove the imports and use this instead:// const { ThreeJSOverlayView, latLngToVector3 } = google.maps.plugins.three;constmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);constoverlay=newThreeJSOverlayView({
map,upAxis: "Y",anchor: mapOptions.center,});// create a box meshconstbox=newTHREE.Mesh(newTHREE.BoxGeometry(10,50,10),newTHREE.MeshMatcapMaterial());// move the box up so the origin of the box is at the bottombox.geometry.translateY(25);// set position at center of mapbox.position.copy(overlay.latLngAltitudeToVector3(mapOptions.center));// add box mesh to the sceneoverlay.scene.add(box);// rotate the box using requestAnimationFrameconstanimate=()=>{box.rotateY(THREE.MathUtils.degToRad(0.1));requestAnimationFrame(animate);};// start animation looprequestAnimationFrame(animate);
I also want to pointout that we can provide a scene object as property of ThreeJSOverlayView constructor
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
Hey all,
Is there any way to use react three fiber in conjunction with googlemaps/three library, the latter takes in a scene object to add an overlay on top of google map.
If i render the objects in Canvas since r3f automatically sets up the renderer and scene, by using useThree inside it feels like I am doing something wrong.
Any help or direction in this matter will be greatly appreciated
This is a simple example on how the library uses three js to render an overlay.
I also want to pointout that we can provide a scene object as property of ThreeJSOverlayView constructor
Beta Was this translation helpful? Give feedback.
All reactions