3D is much more fun when it’s moving! The key to animation is the useFrame
hook.
To use useFrame
, we also need a reference (using React’s useRef
) to the 3D object we want to animate. See the use of cubeRef
in the example above.
Note: useFrame
must be used inside the Canvas
context. E.g. in the example above, if useFrame
would have been in the Scene
component, it would have thrown an error since Canvas
does not yet exist there.
In this example we animate rotation
, but other fun properties to animate could be:
position
(x/y/z)rotation
(x/y/z)scale
(x/y/z)lookAt
(Camera/Light)opacity
intensity
(Light)