React's threejs/pixijs bindings are a great example of what vdom diffing can let you do.<p>Since they bring their own reconcile(a, b, diff) function to React, these libs can turn:<p><pre><code> const world = new World()
const player = new Player()
world.add(player)
// somehow wire up the code to keep
// player.pos updated
</code></pre>
Into:<p><pre><code> const [x, setX] = useState(0)
return <World>
<Player x={x} />
</World>
</code></pre>
In other words, you write declarative code, and it does the hard imperative work of adding/removing/disposing/updating things for you.<p>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.
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.<p>[1] <a href="https://threejs.org/" rel="nofollow">https://threejs.org/</a>
Has ThreeJS updated to start using X3D (<a href="https://www.x3dom.org/" rel="nofollow">https://www.x3dom.org/</a>) yet?<p>Taking a quick look at [the docs](<a href="https://r3f.docs.pmnd.rs/getting-started/introduction" rel="nofollow">https://r3f.docs.pmnd.rs/getting-started/introduction</a>) linked above, I see the use of Canvas. Fair enough.<p>I start using X3D at work in order to enable some cool functionality showing steps to build an assembly in 3D, and it's actually insane how high the performance is. It's all HTML components, so I wrote a super thin React wrapper (essentially the scene needs to be manually loaded once, that's about all) and have been cruising with that.<p>Effortless to fly, rotate, hide or highlight parts, decompose things into x3d assets, and so on.<p>It might have issues somewhere, I haven't widely tested browser compat or anything, but it's curious to me how little I see it versus how much I see ThreeJS when it seems that X3D is the more capable platform.
Another example of this is React-Native-Skia: <a href="https://shopify.github.io/react-native-skia/docs/getting-started/hello-world" rel="nofollow">https://shopify.github.io/react-native-skia/docs/getting-sta...</a><p>It uses a virtual DOM to diff the desired state and the current one: <a href="https://shopify.github.io/react-native-skia/docs/canvas/contexts" rel="nofollow">https://shopify.github.io/react-native-skia/docs/canvas/cont...</a><p>If you're interested how it's implemented, that's the source code: <a href="https://github.com/Shopify/react-native-skia/blob/main/packages/skia/src/sksg/Reconciler.ts">https://github.com/Shopify/react-native-skia/blob/main/packa...</a>
When I was new to the integration of threejs and react I found these examples to be just amazing.<p><a href="https://r3f.docs.pmnd.rs/getting-started/examples" rel="nofollow">https://r3f.docs.pmnd.rs/getting-started/examples</a>
I tried to build a game with react expo and react three last year and it was painful to me.
There were version mismatches and some features didn't work if I combined them in some ways that I needed sooner or later when trying to finish a project.
I believe it is correlated with the fact I tried this on mobile, but maybe someone else has made the same experience with it.
At this point I start to evaluate technologies end to end to not be surprised when projects break at a certain level of maturity or in size when they get close to release in terms of feature completeness.
Is there a Svelte equivalent?<p>I found Threlte[1] recently and enjoy not having to write low-level Three.js code to make things happen.<p>---<p>[1]: <a href="https://threlte.xyz" rel="nofollow">https://threlte.xyz</a>
been there - love how clean react-three looks at first but man, once you hit real perf walls, its like, why am i even using this lol. you think the push for these declarative libs is just for quicker onboarding or something deeper?