pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js

Home Page:https://docs.pmnd.rs/react-three-fiber

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support translation of geometries

kwyntes opened this issue · comments

Right now to translate a geometry we need to take a ref and call the translate function in a useEffect hook.

I'd like to be able to apply a translation through JSX directly.

// now
const ref = useRef<PlaneGeometry>(null!)
useEffect(() => {
  ref.current.translate(sz / 2, -sz / 2, 0)
}, [])

return (
  <mesh>
    <planeGeometry args={[sz, sz]} ref={ref} />
    {/* ... */}
  </mesh>
);

// proposal
return (
  <mesh>
    <planeGeometry args={[sz, sz]} translation={[sz / 2, -sz / 2, 0]} />
    {/* ... */}
  </mesh>
)

We can't overload how prop setting is done since there is no way to discern whether you mean to overwrite a method via direct reference, or as you're suggesting, call it.

This is as concise as we can declare it compositionally, although you can better abstract this and take great care in translating at runtime since translating geometry is expensive and can cause severe GPU performance penalties, even though we time slice object recreation via args.

class MovedPlaneGeometry extends PlaneGeometry { 
  constructor(width = 1, height = 1, ...args) {
    super(width, height, ...args)
    this.translate(width / 2, -width / 2, 0)
  }
}
extend({ MovedPlaneGeometry })

<movedPlaneGeometry args={[sz, sz]} />

Thanks for your response. I'm not sure if I understand correctly, but my suggestion wasn't to change the translate property from a method override to a method invocation, but to add a new property translation which would call the translate method internally. Wouldn't that be possible?