GithubHelp home page GithubHelp logo

rodrigohamuy / react-three-map Goto Github PK

View Code? Open in Web Editor NEW
138.0 4.0 22.0 8.97 MB

Use React and Three.js inside Mapbox and Maplibre

Home Page: https://rodrigohamuy.github.io/react-three-map/

License: MIT License

JavaScript 1.55% TypeScript 96.61% CSS 1.62% HTML 0.12% GLSL 0.11%
mapbox maplibre r3f react-three-fiber threejs 3d map react

react-three-map's People

Contributors

3dpk-interactive avatar github-actions[bot] avatar hambsch avatar rodrigohamuy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-three-map's Issues

Globe

Can this map be converted to Globe?

line with coordinates as points

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"} />

using <EffectComposer> or <Effects> from r3/drei

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?

Integration inside another canvas

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?

Adding Mapbox 3D buildings

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:
image

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': {
//...

Support on demand rendering

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

Pinpoint scale effect

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?

Google WebGL maps?

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

Checking whether or not the 3D environment is inside the polygon

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.
image_2024-02-22_08-30-18
image

Allow to set a custom layer ID, and layer properties

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.

A Circle with 1km Radius

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?

image

THREE.Shape() & <extrudeGeometry args={[shape, options]} />

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!

Imperative coordinates manipulation

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. ๐Ÿ˜Š

Object controls on top of 3D Map

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.

image

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?

Camera controls

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!

mercator line

.. 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>

}

Screenshot (523)

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]);

Support react-map-gl 7.1.x

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.

Use ThreeJS as a canvas overlay

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

Support multiple 3D objects at different coordinates

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>

Examples Error

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
image

Raycasting inaccuracy

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

image

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?

Light sources not applied within `<Coordinates>`

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.

Models below surface clipped at certain camera angles

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?

below.sea.level.mp4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.