react-three-fiber

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