6 ms·

React Three Ecosystem

124 points by bpierre 1y ago

tlarkworthy 1y 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/ https://threejs.org/
- jasonjmcghee 1y 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.
  - eyelidlessness 1y ago
    For what it’s worth, this is also true of whatever else one might express with JSX: imperative code (and syntax, and semantics) can be structured in a way that closely resembles declarative code… with discipline. It’s doesn’t have to be especially onerous discipline if you embrace it, but it becomes considerably more onerous as it becomes more social: if some members of a team/contributors to a project embrace it more/less than others, that difference in commitment becomes a constant source of friction.
    - mikebelanger 1y ago
      > It’s doesn’t have to be especially onerous discipline if you embrace it, but it becomes considerably more onerous as it becomes more social: if some members of a team/contributors to a project embrace it more/less than others, that difference in commitment becomes a constant source of friction. That's one of the stronger arguments for opinionated pre-processors/frameworks/libraries like Typescript/TSX/JSX/React in general. Because it abstract away those things that only some team members would embrace, you effectively make everyone embrace them. That leads to less friction. But this reduced friction comes at a cost: more complex abstractions and incidental bugs related to that complexity. And as far as the procedural vs declarative: after a certain degree of complexity, I find myself introducing procedural codes within useEffects, useMemos anyways
- ttfkam 1y ago
  Exactly, as seen with Threlte as a counterpoint. https://threlte.xyz/ https://threlte.xyz/
- throwaway314155 1y ago
  That all seemed fairly obvious to me.
talkingtab 1y 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 https://r3f.docs.pmnd.rs/getting-started/examples
- chrisweekly 1y 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 https://threejs.org/examples/#webgl_animation_keyframes seem to work great on my phone...
  - MortyWaves 1y ago
    R3F is great but almost all the code sandbox demos have been broken for years at this point
    - esperent 1y ago
      Yeah, they went all in on Codesandbox early on, and at the time that was a good idea. But very soon after Codesandbox made the switch to containers and started chasing monetization. I saw an interaction between the creators of each on Twitter at the time where Codesandbox promised not to throttle or limit R3Fs examples. But I don't think they fully kept that promise.
      - MortyWaves 1y ago
        Sounds annoying. I have posted several examples on the R3F Discord of broken sandboxes but no one wants to fix them so I stopped bothering. All the broken ones I saw were weird things like model/asset files just not being there at all.
        esperent 1y ago
        Changing priorities I guess. I forget the name of the guy who originally created R3F but he is really skilled at making beautiful examples. I think he's much less involved now - the people I see responding to PMNDRS GitHub issues these days are focused on the technical stuff rather than docs and examples.
hombre_fatal 1y 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 1y ago
  Just to clarify, you'd write the bottom code (declarative) and the library translates it to the above (imperative) code?
  - MortyWaves 1y ago
    That’s right
    - cjonas 1y 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 1y 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 https://www.npmjs.com/package/react-reconciler
      - atoko 1y ago
        I’m working on the documentation, but I have a useful implementation of <GithubActions > JSX: https://github.com/levicape/fourtwo https://github.com/levicape/fourtwo The best way to use template JSX is either with a CLI, or by using #! pragma to output the constructed yaml after using a builder.
nawgz 1y ago
Has ThreeJS updated to start using X3D (https://www.x3dom.org/ https://www.x3dom.org/) yet? Taking a quick look at [the docs](https://r3f.docs.pmnd.rs/getting-started/introduction https://r3f.docs.pmnd.rs/getting-started/introduction) linked above, I see the use of Canvas. Fair enough. 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. Effortless to fly, rotate, hide or highlight parts, decompose things into x3d assets, and so on. 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.
- webprofusion 1y ago
  That's like asking "Has React updated to start using Angular".
  - andybak 1y ago
    Even more than that. x3dom looks like the kind of thing that could use threejs under the hood. GP - are we misunderstanding something here?
cyberax 1y ago
Another example of this is React-Native-Skia: https://shopify.github.io/react-native-skia/docs/getting-started/hello-world https://shopify.github.io/react-native-skia/docs/getting-sta... It uses a virtual DOM to diff the desired state and the current one: https://shopify.github.io/react-native-skia/docs/canvas/contexts https://shopify.github.io/react-native-skia/docs/canvas/cont... If you're interested how it's implemented, that's the source code: 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...
NetOpWibby 1y ago
Is there a Svelte equivalent? I found Threlte[1] recently and enjoy not having to write low-level Three.js code to make things happen. --- [1]: https://threlte.xyz https://threlte.xyz
webprofusion 1y ago
Cool but the docs links should take you to the docs, not the github source of the docs. Expected a demo link of each thing.
mawadev 1y ago
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.
gitroom 1y ago
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?
zubairq 1y ago
How does this compare to https://aframe.io https://aframe.io ?

124 points by bpierre 1y 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/ https://threejs.org/

jasonjmcghee 1y 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.
- eyelidlessness 1y ago
  For what it’s worth, this is also true of whatever else one might express with JSX: imperative code (and syntax, and semantics) can be structured in a way that closely resembles declarative code… with discipline. It’s doesn’t have to be especially onerous discipline if you embrace it, but it becomes considerably more onerous as it becomes more social: if some members of a team/contributors to a project embrace it more/less than others, that difference in commitment becomes a constant source of friction.
  - mikebelanger 1y ago
    > It’s doesn’t have to be especially onerous discipline if you embrace it, but it becomes considerably more onerous as it becomes more social: if some members of a team/contributors to a project embrace it more/less than others, that difference in commitment becomes a constant source of friction. That's one of the stronger arguments for opinionated pre-processors/frameworks/libraries like Typescript/TSX/JSX/React in general. Because it abstract away those things that only some team members would embrace, you effectively make everyone embrace them. That leads to less friction. But this reduced friction comes at a cost: more complex abstractions and incidental bugs related to that complexity. And as far as the procedural vs declarative: after a certain degree of complexity, I find myself introducing procedural codes within useEffects, useMemos anyways
ttfkam 1y ago
Exactly, as seen with Threlte as a counterpoint. https://threlte.xyz/ https://threlte.xyz/
throwaway314155 1y ago
That all seemed fairly obvious to me.

talkingtab 1y 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 https://r3f.docs.pmnd.rs/getting-started/examples

chrisweekly 1y 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 https://threejs.org/examples/#webgl_animation_keyframes seem to work great on my phone...
- MortyWaves 1y ago
  R3F is great but almost all the code sandbox demos have been broken for years at this point
  - esperent 1y ago
    Yeah, they went all in on Codesandbox early on, and at the time that was a good idea. But very soon after Codesandbox made the switch to containers and started chasing monetization. I saw an interaction between the creators of each on Twitter at the time where Codesandbox promised not to throttle or limit R3Fs examples. But I don't think they fully kept that promise.
    - MortyWaves 1y ago
      Sounds annoying. I have posted several examples on the R3F Discord of broken sandboxes but no one wants to fix them so I stopped bothering. All the broken ones I saw were weird things like model/asset files just not being there at all.
      - esperent 1y ago
        Changing priorities I guess. I forget the name of the guy who originally created R3F but he is really skilled at making beautiful examples. I think he's much less involved now - the people I see responding to PMNDRS GitHub issues these days are focused on the technical stuff rather than docs and examples.

hombre_fatal 1y 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 1y ago
Just to clarify, you'd write the bottom code (declarative) and the library translates it to the above (imperative) code?
- MortyWaves 1y ago
  That’s right
  - cjonas 1y 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 1y 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 https://www.npmjs.com/package/react-reconciler
    - atoko 1y ago
      I’m working on the documentation, but I have a useful implementation of <GithubActions > JSX: https://github.com/levicape/fourtwo https://github.com/levicape/fourtwo The best way to use template JSX is either with a CLI, or by using #! pragma to output the constructed yaml after using a builder.

nawgz 1y ago

Has ThreeJS updated to start using X3D (https://www.x3dom.org/ https://www.x3dom.org/) yet? Taking a quick look at [the docs](https://r3f.docs.pmnd.rs/getting-started/introduction https://r3f.docs.pmnd.rs/getting-started/introduction) linked above, I see the use of Canvas. Fair enough. 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. Effortless to fly, rotate, hide or highlight parts, decompose things into x3d assets, and so on. 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.

webprofusion 1y ago
That's like asking "Has React updated to start using Angular".
- andybak 1y ago
  Even more than that. x3dom looks like the kind of thing that could use threejs under the hood. GP - are we misunderstanding something here?

cyberax 1y ago

Another example of this is React-Native-Skia: https://shopify.github.io/react-native-skia/docs/getting-started/hello-world https://shopify.github.io/react-native-skia/docs/getting-sta... It uses a virtual DOM to diff the desired state and the current one: https://shopify.github.io/react-native-skia/docs/canvas/contexts https://shopify.github.io/react-native-skia/docs/canvas/cont... If you're interested how it's implemented, that's the source code: 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...

NetOpWibby 1y ago

Is there a Svelte equivalent? I found Threlte[1] recently and enjoy not having to write low-level Three.js code to make things happen. --- [1]: https://threlte.xyz https://threlte.xyz

webprofusion 1y ago

Cool but the docs links should take you to the docs, not the github source of the docs. Expected a demo link of each thing.

mawadev 1y ago

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.

gitroom 1y ago

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?

zubairq 1y ago

How does this compare to https://aframe.io https://aframe.io ?