react-three-fiber

That parenthetical “or anything declarative really” is doing a lot of work, given that: React is a tool for writing 3D scenes that can handle state updates: https://github.com/pmndrs/react-three-fiber React is a tool for writing music that can handle state updates: https://github.com/FormidableLabs/react-music React is a tool for writing infrastructure-as-code templates that… um… could with some additional work handle state updates: https://www.linkedin.com/pulse/aws-terraform-generator-using...

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

The React version is react-three-fiber which is also a cool project. - https://github.com/pmndrs/react-three-fiber - https://docs.pmnd.rs/react-three-fiber/getting-started/examp...

Three.js For folks who know any react I'd recommend react-three-fiber [1] as your entrypoint. It's ridiculously easy to get started. The creator (mlsarecmg on HN, I think), just came out with this tutorial today for beginners: https://twitter.com/0xca0a/status/1445409346305892353 It's paid but there's nearly endless free content as well between his twitter, the pmndrs discord, and the official docs [2]. I started using R3F and was able to put this [3] together, which is heavily inspired by Stripe design, in a couple weeks with some spare time. That is to say how easy it was and how highly I recommend the pmndrs suite for web 3D abstractions. [1] https://github.com/pmndrs/react-three-fiber [2] https://docs.pmnd.rs/react-three-fiber/getting-started/intro... [3] https://r3f-gradient.netlify.app/

No; that's not the test in question. The tweet I started the conversation with [0] shows a bunch of cubes, not text geometry. It's not the text geometry test. It's just creating and manipulating a bunch of cubes. Unfortunately, it was removed from the react-three-fiber examples, so it can't be easily run unless you check out an old version of the repo. It contains two switches, one for React vs. Zustand, and the other for Concurrency On vs. Off [1]. The tweet is talking about the concurrency mode. I'm very familiar with React 18 concurrency, and gave my detailed analysis of it. The documentation you linked even confirms my analysis of it deferring work across frames: > it can potentially defer load and heavy tasks I've already given my feedback about that approach. I heavily suspect the overhead here is all React's reconciler / differ, as

No artificial delay was added from what I can find. Here's the example from the tweet [0]. Feel free to tell me where the artificial delay is. [0] https://github.com/pmndrs/react-three-fiber/blob/e3a71baad42...

As I said, "schedule" just means "defer work to future frames". That's a valid strategy if you have severe load, but it's not globally applicable: one might imagine that two components need to be updated together (e.g. updating the arms and body of a character should not be split up between two frames, or else the user will see split bodies for in-between frames). At the very best, this sort of scheduling should be informed by gameplay systems. It can "effortlessly outperform" only if we're talking about throughput, not latency here -- the scheduler ensures that less is done each frame so we can meet 60fps each frame, at the expense of having things done frames later than when they probably should have been. I'm aware this is all a React feature. I disagree with the React team that "concurrency" is a usable solution to performance in all

you want your view to do something, to participate in the render loop, to animate, user interaction etc. look at the example on the main page: https://github.com/pmndrs/react-three-fiber#what-does-it-loo...

It is a using custom renderer indeed: https://github.com/pmndrs/react-three-fiber it doesn't wrap Threejs, just expresses it via JSX similar to how react-dom expresses the dom.

It looks quite familiar, it generates a plain data structure and reacts on a set of user inputs. I‘d have to look up how this communicates with threejs (which is done via a wrapper library) and what the semantics of that is, but otherwise the code looks clean and simple to me. Edit: here https://github.com/pmndrs/react-three-fiber