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?