react-three-fiber

Yeah, I wish this project had a React component backend. D3.js and Observable Plot don't work that well with modern reactive frontend frameworks either though. They don't diff the SVG tree. The recommended way to react to some data change is to rebuild the whole SVG in a useEffect [1], when in fact you could just have a reactive SVG tree [2]. You just have to unpack and recode what would D3 do (see the case about Axis in the last link). Using enter(), update() and exit() seems to no longer be the way to do things. Also, React components offers great composability to the programmer. I wish there was a maintained React version of Observable Plot; just like what React-Three-Fiber [3] does with Three.js. Or maybe a version of this Reanimate lib into a React component. [1] https://github.com/observablehq/plot-create-react-app-exampl... [2] htt

If anyone is looking for something more production ready (that uses webGL), I highly recommend https://github.com/pmndrs/react-three-fiber we use it to built https://flux.ai

This reminds me of react-three-fiber[1], which is built on top of Three.js. react-three-fiber is a really nice way to build 3-d scenes on the web for those of us who aren't skilled in graphics and GPU programming. Looks like Three.js supports WebGPU rendering now. Naively, I wonder how performance differs between UseGPU and R3F with Three's WebGPU renderer. [1]: https://github.com/pmndrs/react-three-fiber

three.js[1], a webgl rendering library. there is also a react wrapper called react-three-fiber[2] which is making a splash. 1. https://threejs.org/ 2. https://github.com/pmndrs/react-three-fiber

I made this site using R3F (https://github.com/pmndrs/react-three-fiber), a React renderer for 3JS (https://threejs.org/). The celestial bodies are Three.JS meshes. I used loaders (namely 'useLoader' from R3F and 'GLTFLoader' from 3JS) to import 3D models, such as International Space Station. More on loading models in R3F: https://docs.pmnd.rs/react-three-fiber/tutorials/loading-mod... I've future plans for this side project. It would be great to hear from the HN community before diving into them. Enjoy! P.S: Getting an empty (probably black) screen? This app shows up in browsers that support WebGL2.0 (most modern browsers do). Check this site to see whether your browser supports WebGL2.0: https://get.webgl.org/webgl2/ P.S.S: There'll probably be responsive design issues. I'd highly encourage you to use a desktop version or rotate to land