I am currently struggling to find a way to set a custom layer ID and layer properties, since the layer is being set after all other layers, that's bad, because the 3d model should be before (above) all other layers.

This would fix it.

.. following the previous discussion

Thanks. Sorry for the late reply. I am trying to wrap my head around this. the ajustment works when I implement the extruded shape.
I need a line, like drawing on a mercator map, I get this:

// need to bring it to mercator space ??
 // const points = props.drawnPoints.map((p) => coordsTovector3(p,  props.drawnPoints[0])).map(([x, , z]) => new Vector2(x, z));

  return (
      <group>
      <Line points={flatPt} lineWidth={1} color={'rgba(25,255,255, .20)'} opacity={.1} linejoin={'round'} transparent={true} />
       </group>

}

so i implemented a mercator projection instead, it is a bit hacky, what should i use instead?
const flatPt = props.drawFlat.map((p)=> [(p.x * 40000000 )- 20010000 , p.z, (p.y * 40000000) -20004000]);

https://tiles-a.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt",
"https://tiles-b.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt",
"https://tiles-c.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt",
"https://tiles-d.basemaps.cartocdn.com/vectortiles/carto.streets/v1/{z}/{x}/{y}.mvt
Hello, are these links free?

We've noticed that every time we use <Coordinates> the meshes inside are black because the light source is not being applied: https://codesandbox.io/p/sandbox/react-three-map-basic-app-forked-jk3swn

Then I found #61 (comment):

Each <Coordinates> component is a new Three Scene [...]

which is probably the cause of this issue.

Background: We have a bunch of features we get from map.querySourceFeatures - each has its own coordinates and we thought we could just wrap <Coordinates> around each one.
The workaround is to also apply a light source for each one of them but I doubt that this can be considered good practice.

Use a separated canvas for react-three-map instead of sharing it with the map provider.

This can bring benefits like:

• making it easier to support post-processing effects (as they seem to clear the map provider canvas otherwise ( #69 )
• path the way to run on a worker.
• path the way to support Google Maps too, as it will be a more generic solution.
• removing some custom hooks added to react-three-map to control the invalidate logic.
• independent render loops between the map provider and react-three-map

Can I install it in React Native?

Is it possible to use google maps WebGL? Since google maps webgl comes with 3D models (simple) of the buildings and monuments.

MapLibre renders on demand. R3F also can render on demand. Lets find a way of having both working on demand together.

I've been exploring this library, and it's been a fantastic experience so far. I've noticed that updating object coordinates in the scene via props for moving objects (not mentioning even the interpolation now) can lead to frequent re-renders, impacting performance. To optimize this, I was thinking of leveraging the useFrame to directly manipulate the object coordinates. But after looking into the current implementation this doesn't sound as easy thing. Is it even possible in current state of mapbox layers? As I unterstand in general each object is new three scene.

I'm curious to hear your thoughts on this and whether it aligns with the library's development goals. I appreciate the hard work you've put into this library, and I'm excited to see how it continues to evolve. 😊

First and foremost, what an incredible feat you're achieving with this repo, it's the perfect solution for using R3F in a maps environment!

I've been playing with the library for a week or so, everythings been absolutely delightful being able to add R3F components as an overlay and the ability to extend THREE graph with drei!

one limitation that I've stumbled on is some sort of matrix mismatch when trying to use a THREE.Shape() as a basis for <extrudeGeometry/>, it looks like maybe one of two (or both) things are happening, a matrix transformation is being applied on the shape before it's passed as a prop to the extrusion ( afaik, THREE's native shapes are drawn on an x,y plane to be extruded on the z plane, it seems like deriving a vector2 from MapboxGl.MercatorCoordinate.fromLngLat([lng, lat], 0) is maybe missing a relative matrix transform resulting in an incorrect evaluation of the final geometry ) and / or a matrix transform is missing from the eventual ExtrudeGeometry which is currently being extruded on the z axis ( as it would be in a typical THREE environment ) but in this maps environment ( I'd expect ) would rather be extuded on the Y ( or up ) axis away from the maps "floor" with the same behaviour as map boxes native 2.5D layer's "fill-extrusion-height"

would you know or atleast have any idea why this may be happening? Is it left down to user land to implement the correct transforms for this? if so would you know how I'd apply the correct matrix transforms and and which stage? If it's not intentional and not intentionally user land issues is this something valuable worth pointing out for a potential update to support <extrudeGeometry/> with shapes?

Thanks for your effort on creating this Library, it's a real powerhouse in itself!

Hi i wanted to know if it's possible to zoom in and out and that scales up and down the pinpoint so we can always see it on the map?

Hi, I have a question regarding camera controls.

Is there a way to access the camera controls to be able to zoom to the objects of my 3d scene? For now 'controls' property is always null when I try to access it via useThree hook

Thanks!

raycasting accuracy is strangely off when the map is zoomed out and objects appear small... for instance in one of the official examples here...

in the above image the mouse is currently over the lowest left cube (although you can't see it, it is ) but the onPointerOver event is not being detected for some reason, it's possibly a raycaster misprojection or a camera projection matrix issue maybe?

As Map is a wrapper of canvas, many apps still need to access the canvas states. Is it possible to isolate the map in a secondary canvas inside the main canvas, and both being able to communicate?
Is this feasible in a WebXR environment?

React Drei component with property "transform={true}" seems to not work under react-three-map canvas.

Can this map be converted to Globe?

On react-map-gl@^7.1 (which is on beta state atm) separates MapLibre from Mapbox hooks and components. So we need to do the same on our side.

Is it possible to use the <EffectComposer> component from drei within the <Canvas> provided by react-three-map or is this a current limitation? I tried to get some <Effects> in and also tried using <EffectComposer> but all setups seem to clear the render buffers resulting in the mapbox render not being renderered under the three scene...

I was going to have a look into the possible upcoming features now to see if this is already documented, if not do you think this will be a possible future feature @RodrigoHamuy ?

EDIT: I see here there's a postprocessing todo https://github.com/users/RodrigoHamuy/projects/1?pane=issue&itemId=31099754 is this still in the pipeline to be worked on or do you think it's not possble currently?

Hello to all my friends, I am looking for a way to find out if the 3D environment is inside a polygon or not
The polygon is developed in another component. I have the coordinates of the same polygon. I want to calculate whether this 3D environment is inside the polygon or not. Even if a phone from the 3D environment was outside the polygon, I must receive an error. Help, friends.

As it is, we have to create a new R3F root for every ThreeJS object we want to place in a specific coordinate.

This is very inefficient, as it means we are rendering every object separately just because of where they are located.

<Canvas latitude={0} longitud={0}>
  <axesHelper />
</Canvas>

We should add a new Coordinates component so you can do this instead:

<Canvas>
  <Coordinates latitude={0} longitud={0}>
    <axesHelper />
   </Coordinates>
<Canvas>

This lib is a life saver!

I add 3DObjects at Mapbox coordinates and i am now trying draw a line in between ( or instead instead)
I am encountering an issue trying to draw the line with coordinates as points. How can i transcribe mapbox's coordinates into the R3F world?

A hackier way would be to retrieve the position of the 3DObjects (or the Scene), Can i access these?

 curvePoints.push([info.lngLat.lng, info.lngLat.lat, 1 ])
...
const linePTDrawn =  DrawPositions.map((pos, index) =>
<Coordinates key={index}  latitude={pos[1]} longitude={pos[0]}>
  <hemisphereLight  args={["#ffff00", "#00ffff"]  }  position={[-1, 5, -1]}   />
  <object3D scale={1000}>
    <Box  position={[.5, -.5, 0]} />
  </object3D>
  </Coordinates>
);

<Line points={curvePoints} linewidth={30} color={"red"} />

Hi,
I didn't get the const map = useMap() to work. I need to access the map object so I can render the 3D buildings reference.
The view I want is this:

And the following is how to add that 3D buildings layer to a mapbox map. How to do it with react-three-map?

// The 'building' layer in the Mapbox Streets
// vector tileset contains building height data
// from OpenStreetMap.
map.addLayer(
{
  'id': 'add-3d-buildings',
  'source': 'composite',
  'source-layer': 'building',
  'filter': ['==', 'extrude', 'true'],
  'type': 'fill-extrusion',
  'minzoom': 15,
  'paint': {
//...

Hi,

I need to draw a Circle with 1Km radius. What is the best way to convert three.js units to map units?
Is that a fixed translation?

Great library. I've been playing with adding models that go below the sea surface.

When viewed at an angle - it renders the model - this is fine, we can apply a transparent 'surface' at sea level
When the move the camera and view it more top down, the model gets clipped.

I'm wondering if it's some depth/distance clipping in the mapbox camera?

Error on Sun Light example

Recently I've encountered this error on the Examples page:

TypeError: Cannot read properties of undefined (reading 'cssRules')
    at Cc (mapbox-gl-CEFP40r5.js:1:42645)
    at r (mapbox-gl-CEFP40r5.js:1:42589)
    at Sc (mapbox-gl-CEFP40r5.js:1:42607)
    at mapbox-gl-CEFP40r5.js:1:48092
    at mapbox-gl-CEFP40r5.js:1:34409
    at mapbox-gl-CEFP40r5.js:1:47732
    at Fc (mapbox-gl-CEFP40r5.js:1:48352)
    at mapbox-gl-CEFP40r5.js:1:97486

Hi, amazing library! I've been working on top of it of a few days already. It simplified my pipeline like 10x.

One thing I've been trying to do, and hopefully someone else got it running, was to have a Pivot Control (or a TransformControls) on an object that is placed on the map.

This didn't work: every time I try to move the object, I think the cursor interaction on the map is overlaying the interaction with the object end up panning the map, with no interaction with the object's arrows.

Any solution for this?