You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Types of property 'onClick' are incompatible.
Type 'MouseEventHandler<EventTarget> | undefined' is not assignable to type '((event: ThreeEvent<MouseEvent>) => void) | undefined'.
Type 'MouseEventHandler<EventTarget>' is not assignable to type '(event: ThreeEvent<MouseEvent>) => void'.
Types of parameters 'event' and 'event' are incompatible.
Type 'MouseEvent & IntesectionEvent<MouseEvent>' is missing the following properties from type 'MouseEvent<EventTarget, MouseEvent>': isDefaultPrevented, isPropagationStopped, persist
@dbismut Thanks David. Apologies for the duplicate.
I'm not sure how to solve this unless I create a package such as @use-gesture/r3f with proper types.
Yeah this was the solution I was thinking might be needed. Perhaps such a package would open the door to adding more specialised interfaces for THREE e.g.
bounds could take a Box3 | React.RefObject<Box3> as an analogue for HTMLElement | React.RefObject<HTMLElement>
axis take a Vec3
offset/movement could be automatically translated into world coordinates.
offset/movement could be calculated based on distance along a plane (axis) at the ray intersection point.
etc
Suggesting these things specifically because they're the useDrag features I had to reimplement when I converted my current project UI elements from using/abusing DOM+CSS transforms to r3f.
useDrag
seems to work fine with@react-three/fiber
components, but TypeScript complains about the handlers being attached by{...bind()}
.e.g.
Sandbox
https://codesandbox.io/s/fervent-blackburn-3p8db?file=/src/index.tsx
Information:
Checklist:
The text was updated successfully, but these errors were encountered: