React assistance ...

[PaulieScanlon]

Hey, great lib, i've tried to hand crank a geoJson globe and it was really hard.

I was wondering if you could give me a little assistance with loading some geoJson. I'd also like to create a PR once i have this working with some code snippets for how to use with React and perhaps even React Three Fibre in case other run into the same confusion i have.

Here's where i'm at, no errors but the "land" doesn't load.

import { GeoJsonGeometry } from 'three-geojson-geometry'

...

  useEffect(() => {
    axios
      .get(
        'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_50m_land.geojson'
      )
      .then((response) => {
        console.log(response.data) // response below
      })
      .catch((error) => {
        throw new Error()
      })
  }, [])

....

This gives me a response similar to the below:

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "scalerank": 0,
        "featureclass": "Land"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [
              179.99921875,
              -16.168554687500006
            ],
            [
              179.84824218750003,
              -16.30166015625001
            ],
            [
              179.79384765625002,
              -16.37031250000001
            ],
            [
              179.74814453125003,
              -16.4462890625
            ]
          ]
        ]
      }
    }
  ]
}

... which i'm trying to return a bit like this

  const geometry = new GeoJsonGeometry(geoJson) // new THREE.GeoJsonGeometry(geoJson) throws an error
  const material = new THREE.LineBasicMaterial({ color: 0xff0000 })

  return (
    <line>
      <bufferGeometry attach="geometry" geometry={geometry} />
      <lineBasicMaterial attach="material" material={material} />
    </line>
  )

Is there anything you can see that i'm doing wrong. Just trying to work out if it's the geoJson source i'm trying to load which i got from here: http://geojson.xyz/ or the way i'm using React Three Fibre

Thanks in advance!

[vasturiano]

@PaulieScanlon thanks for reaching out.

I can't speak much to the React part since this is just ThreeJs geometry module, but, I think you may have an issue on this line:

const geometry = new GeoJsonGeometry(geoJson) // new THREE.GeoJsonGeometry(geoJson) throws an error

Assuming your geoJson variable is a FeatureCollection straight from the file, you need to create a GeoJsonGeometry from each of the feature's geometry. You can see this done in the example's code: https://github.com/vasturiano/three-geojson-geometry/blob/8e748b8ecaacd8add441f91bd360ab0f9f64ea4f/example/countries/index.html#L32-L37

Let me know if that addresses your issue or if you're experiencing any more difficulties.

[PaulieScanlon]

Hey! Lovely stuff! I'll dig in to that tomorrow and let you know how I get on. Thanks so much for the reply!

[PaulieScanlon]

Hey @vasturiano it's all working great, thanks for the top tip. It took me a while to work out how to React Three Fibre this all but it's working a treat.

Just one small issue regarding SSR... i've opened another issue but am happy to create a PR if it's something you agree with.

Thanks again!!