[HN Gopher] React Component for 3D Maps
___________________________________________________________________
React Component for 3D Maps
Author : pheelicks
Score : 77 points
Date : 2021-01-18 13:25 UTC (9 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| andybak wrote:
| The title implies this is React only. Actually it's a vanilla js
| library with a React wrapper.
| pluc wrote:
| Doesn't work at all of me. I just get a green blob. Also can't
| search for anything on the demo. So, uuh, pass
|
| https://felixpalmer.github.io/procedural-gl-js/
| suprfsat wrote:
| Looks like they ran out of geocoding quota.
| pheelicks wrote:
| Bug reports are welcome at:
| https://github.com/felixpalmer/procedural-gl-js/
|
| Also the geocoding quota issue has been resolved
| pluc wrote:
| This is the result of a search for New York:
| https://imgur.com/YqHAgoB
|
| Really, it just stays blobby regardless of what I do.
| UltimateBallR wrote:
| This is really fantastic, thanks for making this!
| dgb23 wrote:
| Entire source is here (107 loc):
| https://github.com/felixpalmer/procedural-gl-react/blob/main...
|
| It seems to be a nice little trick to translate state from the
| React lifecycle to a non-React library.
| pheelicks wrote:
| I wrote the underlying 3D library, but React isn't my
| specialty, so I don't know if this is deemed best practice.
| Seems to work though and is nice and extensible, allowing the
| API to be proxied if and when the component changes
| criddell wrote:
| I don't mean to pick on you here, but _seems to work_ is
| about the best anybody can do these days when talking about
| Javascript libraries. It 's a little depressing at times.
| k1ll3rf0x wrote:
| Oh boy, this brings back some fond memories from around
| 2013-2015.
|
| Around that time I wrote very similar 3D map library (using
| three.js and cdlod-type approach for terrain rendering) and
| created custom AngularJS directives for similar purposes like
| your React library.
|
| Sadly, my code was closed source and the startup I was
| working in went bankcrupt and my code went with it.
|
| Thanks for sharing your project :)
| coding123 wrote:
| Seems like the main trick is the return false in the
| shouldComponentUpdate. Effectively making it so that all HTML
| writes are banned.
| dahart wrote:
| Does this always work, or is there a better way now? It's
| been a little while since I used React, but I remember being
| confused about how a canvas that needs to retain state was
| supposed to be handled in React. At the time it seemed to me
| like React wasn't designed to handle WebGL.
| nightski wrote:
| It's always worked. The way to do it with function based
| components is slightly different but the effect is the
| same. But this class based component method has worked
| forever.
|
| I think people think because they are using React it's
| horrible if they let something else change the DOM. But in
| reality I do this all the time with D3. Yes you can render
| SVG with React and get it to work with D3 that way. But
| honestly I found it a lot cleaner to just let D3 takeover
| the rendering. This let me work directly from samples on
| the web without much translating to get it to work in
| React.
| timdorr wrote:
| Yeah, the React parts of this are very minimal. I'm not really
| sure what using it gets you, since it just manages a single
| div.
|
| The _actual_ library that does all the work is here:
| https://github.com/felixpalmer/procedural-gl-js
___________________________________________________________________
(page generated 2021-01-18 23:01 UTC)