pmndrs / react-zdog

⚡️🐶 React bindings for zdog
MIT License
443 stars 21 forks source link

Rotation issue #9

Closed boardfish closed 5 years ago

boardfish commented 5 years ago

Creating the canvas with rotate already set results in a different rotation than changing the rotation after the initial render.

I'm going for an isometric perspective sort of thing

    x: -0.33 * TAU,
    y: -0.5 * TAU,
    z: -0.9 * TAU

Rotation unset: Rotation { x: 0, y: 0, z: 0 }

Rotation unset, then changed to the given values via state change: Screenshot 2019-06-11 at 14 20 03 (desired outcome)

Rotation set: Screenshot 2019-06-11 at 14 20 36

I've got a suspicion that by setting the rotation on init, it affects where shapes are placed. However, this isn't the case for Zdog on its own, as what I'm working on is based on something I did in plain Zdog – in that, I initialised the illustration with a rotation, and was still able to create boxes with the same coordinates and get the desired outcome above.

I wanted to rectify this by initialising with all rotation at 0, but trying the useZdog snippet from the README resulted in TypeError: _useZdog is undefined. I was also unclear on how to use the useRender hook.

Thanks again for all your solid work on this port!

drcmda commented 5 years ago

could you pour this into a codesandbox? i don't think i'm doing anything special other than instanciating zdog interfaces and forwarding these props, there shouldn't be anything in between.

boardfish commented 5 years ago

Hopefully this'll do the trick, I've not touched CodeSandbox before.

The three text boxes at the bottom of the page set the x, y and z rotation to input * TAU respectively on change. Note that resetting them to 0 gives the desired rotation – that's probably the key to figuring this one out.

drcmda commented 5 years ago

I've cleaned it a little: https://codesandbox.io/s/winter-sunset-csx9b but i think this has to go straight to zdog. The way rotation works is just weird. Either they have a bug or they need to communicate that we have to call some method to update the graph or something.

boardfish commented 5 years ago

I'm liking that react-spring hook! I'll reference this issue over there.

drcmda commented 5 years ago

its faster. motion renders the whole thing 60 frames per second, ... though react. spring animates the canvas directly calling Zdog.extend(node, newProps), will make a difference for bigger scenes. sadly the objects in zdog are kind of verbose, the x/y/z stuff, if these were arrays like [x,y,z] the interpolation stuff would fall away.

drcmda commented 5 years ago

could you try the latest version? it should behave as expected now

boardfish commented 5 years ago

Yep, I'll give this a shot as soon as I can.

boardfish commented 5 years ago

There we go!

boardfish commented 5 years ago

Rotation doesn't respond to state changes now, though - I'll raise a separate issue. You can see it in action by changing the rotation in the text boxes.