Figure out how to do better onupdate callbacks in React about three-elements

[justinfagnani]

We have a new version of that concept we're working on for the next release of Lit: https://github.com/Polymer/lit-html/blob/lit-next/packages/labs/src/frameworks/react/create-component.ts

It's not Lit specific, so you could use it with your classes.

[hmans]

Right now, a somewhat clunky but workable workaround is to just use refs:

const Thingy = ({ speed = 1 }) => {
  const rotate = (el) => (dt) =>
    (el.object.rotation.x = el.object.rotation.y += speed * dt)

  return (
    <three-mesh ref={(el) => (el.onupdate = rotate(el))}>
      <three-dodecahedron-buffer-geometry />
      <three-mesh-standard-material color="hotpink" />
    </three-mesh>
  )
}

[hmans]

This might also help:
https://github.com/webcomponents/react-integration

[calebdwilliams]

In the meantime you might consider something like JSX-native-events. I talk about that a bit in this article in CSS-Tricks.

[hmans]

I'll take a look, thanks!

[hmans]

We now have an experimental @three-elements/proxy package that can generate framework glue (here's a @three-elements/preact package that uses it for Preact.) I'm relatively sure that this will help us sort out the React issue too, by providing some glue that transparently creates React Components wrapping three-elements tags (yeah, it's wild.)