Skip to content(if available)orjump to list(if available)

React Three Ecosystem

React Three Ecosystem

7 comments

·May 10, 2025
Visit

hombre_fatal

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

Just to clarify, you'd write the bottom code (declarative) and the library translates it to the above (imperative) code?

MortyWaves

That’s right

talkingtab

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

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

R3F is great but almost all the code sandbox demos have been broken for years at this point

tlarkworthy

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/