Web Page Test where dog goes for a walk across the screen, can click to change pose and activate bark.
try it at https://dog-app-omega.vercel.app/
Synchronizing two different rendering engines: the DOM (SVG) and WebGL (Three.js). Using gsap.fromTo, the dog's position is animated along the Z-axis
-
React: Component-based UI structure.
-
Three.js / React-Three-Fiber: WebGL rendering engine.
-
React-Three-Drei: Helpers for GLTF loading and Contact Shadows.
-
GSAP (GreenSock): Movement of features
-
SVG: Scalable, lightweight vector graphics for the background environment.
Sound Effect by u_5wgfa0ekjt from Pixabay
Model by stylo0 on SketchFab