Making a 3D rotatable cube, I want a user experience where if they “flick” a layer (quickly pointerDown then pointerUp in a direction) it spins a1/4 turn, but if they hold for more than 500ms, instead of spinning the layer, I set enableRotate to true, and if they subsequently move the cursor before letting up, the whole cube’s orientation (the scene, actually) becomes draggable.
The problem is that it seems setting enableRotate=true on the controls object after pointerDown does not result in that pointer being able to drag the scene, and the user has to life their finger up and put it back down, ruining the simple UX I’m after.
So my question is: is there a way to effect what I want, or will I have to go with a different user interaction model?
Alright, I think there is some interference from either NextJS or (more likely) React/R3-Fiber.
So I’ve put up a repo with my case stripped down to the bare minimum.
I’m logging enable/disable actions in the console. You can see the assignments are happening as expected, but the scene doesn’t actually become rotatable when the timeOut is called.
Try mouse-down, wait half a sec, then drag both on and outside of the cube. Once disabled by the downPointer event, the scene doesn’t become draggable again until a new down-pointer event is in play. This is unlike the experience that I get in @PavelBoytchev’s sandbox , though it’s really the exact same approach, just wrapped in all the react stuff.