How can I use 8th wall in my Three.js project? and play animations?

🧑‍💻 Technical Support
1

Hi team,

I’m a Three.js developer working on a WebAR application where the 3D model includes an animation that users should be able to play and pause interactively within the AR experience. Since native AR viewers on iOS and Android don’t allow this level of control, I opted for an 8th Wall Pro account to leverage its flexibility and real-time rendering capabilities.

That said, I’m finding it difficult to locate up-to-date and comprehensive documentation on how to fully integrate 8th Wall into a modern Three.js project, especially in terms of handling animation playback via UI buttons (e.g., play/pause functionality using AnimationMixer).

Could you please guide me on the recommended approach for:

  • Integrating 8th Wall with an existing Three.js project
  • Implementing interactive animation control via UI in an 8th Wall project

Any examples, best practices, or pointers would be greatly appreciated.

Thank you!

2

Hi, welcome to the forums!

If you’re interested in using our legacy cloud editor we have a sample project that shows how do this with A-Frame: A-Frame: Animation Mixer | 8th Wall | 8th Wall.

If you want to do this in Studio it’s a bit different but the general idea is putting your model in the scene and making a custom component that changes the animationClip property on the GLTFModel component.