R3F Curve Animation
Features
- Nodes with configurable position, scale, rotation and color
- Left click on a node to select it and show Gizmos around it
- Right click on a node to cycle through Gizmo modes (translation, rotation and scale)
- Animated 3D object follows a smooth curve
- Mesh transform and color are interpolated throughout the curve
- Orbit Controls to looks around the scene
- Buttons to add and remove nodes, play animation and Color Pickers to change node colors
Tech stack
- React
- Three.js
- React Three Fiber
- React Drei helpers
- GSAP for animations
- Valtio for mutable state management
- Leva for floating UI
Building
$ git clone [email protected]:DevPika/r3f-curve-anim.git
$ cd r3f-curve-anim
$ npm install
$ npm run dev
Visit http://localhost:5173/ after dev server boots up.
Based on
- "Vite + React" template
- r3f Transform Controls example