4 ms·
React Component for 3D Maps
- dgb23 6y agoEntire source is here (107 loc): https://github.com/felixpalmer/procedural-gl-react/blob/main/src/ProceduralMap.js 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 6y agoI 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 6y agoI 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 6y agoOh 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 6y agoSeems like the main trick is the return false in the shouldComponentUpdate. Effectively making it so that all HTML writes are banned.
- dahart 6y agoDoes 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 6y agoIt'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 6y agoYeah, 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 https://github.com/felixpalmer/procedural-gl-js
- pluc 6y agoDoesn'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/ https://felixpalmer.github.io/procedural-gl-js/
- suprfsat 6y agoLooks like they ran out of geocoding quota.
- pheelicks 6y agoBug reports are welcome at: https://github.com/felixpalmer/procedural-gl-js/ https://github.com/felixpalmer/procedural-gl-js/ Also the geocoding quota issue has been resolved
- pluc 6y agoThis is the result of a search for New York: https://imgur.com/YqHAgoB https://imgur.com/YqHAgoB Really, it just stays blobby regardless of what I do.
- UltimateBallR 6y agoThis is really fantastic, thanks for making this!
- andybak 6y agoThe title implies this is React only. Actually it's a vanilla js library with a React wrapper.