How to load a lottie JSON file and play animation on click?

Questions
1

I’ve successfully gotten all my GLTF models to load, but would like to add a lottie animation play on click event for a certain mesh.

I’ve basically added ‘click spheres’ over certain parts of my model so when a user clicks them it will play an animation (the JSON lottie file)

I am having a lot of difficulty though finding anyone who has done this online with THREE.js. I’ve tried implementing the AnimationLoader via the THREE.js docs but have had no success.

The specific JSON file I want to play is the ‘3darm.JSON’ and I am trying to get it to play once the arm click sphere is either clicked or hovered over.

I’ve linked a zip to my code below and would appreciate any help I can get.

https://drive.google.com/drive/folders/19vyZVkGY9cU0wWfJoxGo_ViyncQ-5oIR?usp=sharing

2

I don’t think you can use LottieLoader for this. The loader always returns a texture in its onLoad() callback since it converts animated vector graphics into a (renderable) canvas.

3

Hi,
So if I’m reading this correctly, in order to provide any pseudo interaction with supplied lottie files, one would have to load a new lottie file(hence texture) for each desired interactive resultant animation yes?