React Three Ecosystem

46 bpierre 10 5/10/2025, 1:02:55 PM react-three.org ↗

Comments (10)

hombre_fatal · 1h ago
React's threejs/pixijs bindings are a great example of what vdom diffing can let you do.

Since they bring their own reconcile(a, b, diff) function to React, these libs can turn:

    const world = new World()
    const player = new Player()
    world.add(player)
    // somehow wire up the code to keep 
    // player.pos updated
Into:

    const [x, setX] = useState(0)

    return <World>
      <Player x={x} />
    </World>
In other words, you write declarative code, and it does the hard imperative work of adding/removing/disposing/updating things for you.

Just like how it helps you sync your data model to underlying stateful DOM nodes; the idea can be applied on top of any stateful system.

cjonas · 47m ago
Just to clarify, you'd write the bottom code (declarative) and the library translates it to the above (imperative) code?
MortyWaves · 45m ago
That’s right
cjonas · 39m ago
Are there any guides on using the "react style" framework (JSX / State) to generate outputs other than DOM? I've been interested in the idea of doing something similar for JSON or markdown document generation.
cwackerfuss · 28m ago
I don't have a good guide for you, but this is the lib you use to create custom React renderers:

https://www.npmjs.com/package/react-reconciler

talkingtab · 1h ago
When I was new to the integration of threejs and react I found these examples to be just amazing.

https://r3f.docs.pmnd.rs/getting-started/examples

chrisweekly · 55m ago
The screenshots look cool, but (on my iPhone) the 1st one I tried to view was in a code sandbox that threw an error.

The examples here

https://threejs.org/examples/#webgl_animation_keyframes

seem to work great on my phone...

MortyWaves · 44m ago
R3F is great but almost all the code sandbox demos have been broken for years at this point
tlarkworthy · 1h ago
note three.js [1] has nothing to do with React out of the box though, this page highlights an atypical way of using three.js through a popular React binding.

[1] https://threejs.org/

jasonjmcghee · 19m ago
You might be getting downvoted for saying it's an "atypical" way of using three.js. the pmnd.rs community (for example) is quite large.

I understand why people like the declarative nature of react three fiber, but it's quite unfortunate that it requires something like code sandbox to allow modification / working with it on the web- but that's by nature due to being react.

Vanilla three.js can be written surprisingly similarly, if you are disciplined about breaking things up into functions/components. And no react necessary / can embed a code editor and allow direct modification.