React Component for 3D Maps | Hacker News Reader

React Component for 3D Maps

github.com

82 pointspheelicks14 comments

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.

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

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.

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

Seems like the main trick is the return false in the shouldComponentUpdate. Effectively making it so that all HTML writes are banned.

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.

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.

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

The title implies this is React only. Actually it's a vanilla js library with a React wrapper.

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/

Looks like they ran out of geocoding quota.

Bug reports are welcome at: https://github.com/felixpalmer/procedural-gl-js/

Also the geocoding quota issue has been resolved

This is the result of a search for New York: https://imgur.com/YqHAgoB

Really, it just stays blobby regardless of what I do.

This is really fantastic, thanks for making this!

Reply on news.ycombinator.com