Hacker News Reader

Comment by onion2k | Hacker News Reader

react-three-fiber is a really nice library to make web 3D things with. Three.js is brilliant, but there's a metric ton of boilerplate to get complicated things up and running. react-three-fiber just shuffles that away so you can concentrate on building a graph out of components. I've been getting up to speed with it for a little while and I've been chucking things I've learned in to a Github Pages site - https://onion2k.github.io/r3f-by-example/ Each example can be spun up on Codesandbox with the click of a link eg https://onion2k.github.io/r3f-by-example/examples/geometry/i... (Click the "Fork on Codesandbox" link)

There are tons of good examples of how to use react-three-fiber on Codesandbox - https://codesandbox.io/search?query=react-three-fiber&page=1

View on HN

I haven't followed r3f development for the last six months or so, but previously I tested a couple of examples that were available as both r3f and pure three.js. I tested them on my old, slow mobile - and there seemed to be a big difference, with r3f much slower. When I brought this up with the devs, they have waved it away saying it's because the demos were running in dev mode (or something similar). However, I haven't seen any genuine comparisons of performance in r3f vs three.js, so for now I'm erring on the side of caution and assuming it's slow. I don't know enough about react to create performance tests myself, unfortunately.

You don't really need to err on the side of caution, you can just try some of the examples. The first example, https://i2160.csb.app/ runs well on my $120 3 year old Android phone. My instanced ducks example, https://os16k.csb.app/ only gets about 15fps but its doing more than most games or sites need albeit in a trivial way.

react-three-fiber isn't a magic bullet that will make all web 3D things fast. You still have to be sensible. It does make it much easier to prototype things though, and a lot of the time performance is great. And if it isn't then most of the code is quite straightforward to move to pure WebGL.

r3f does not have a performance overhead, it is literally zero. rendering is done in threejs purely, react only takes care of managing the scene. but it can, in situations where the app faces a lot of load, outperform three easily, because it is scheduled, just like a virtual list outperforms a generic list.

When I went to your site, the “screenshot coming soon” for each of them caught all of my attention so I didn’t notice the fork on codesandbox link.

But why not just have the live WebGL thing on each page itself?

I'm writing something to generate screenshots at the moment. They'll be there fairly soon.

I could embed the live WebGL, or a codesandbox embed. I might do that eventually.

+1 for embed live WebGL

Thanks for the helpful repo and linking to it! Been looking fwd to playing w react-three-fiber...

Reply on news.ycombinator.com