Three.js + webxr animations not playing from .glb file - animation

Question

I am unable to get the animation clips from the .glb file to play. The .glb model loads and is displayed on the screen but the animation does not play.
The animations play fine when viewing the object in the three.js editor.
The .glb has 1 animation clip associated with it.
Any Help would be much appreciated!!!
import {
Mesh,
AmbientLight,
Clock,
AnimationMixer,
PerspectiveCamera,
Scene,
WebGLRenderer,
MeshBasicMaterial,
RingGeometry,
sRGBEncoding
} from 'three';
import {ARButton} from 'three/examples/jsm/webxr/ARButton';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js'
class App {
constructor() {
this.clock = new Clock();
this.camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.set(0, 1.6, 3);
this.scene = new Scene();
this.renderer = new WebGLRenderer({
antialias: true,
alpha: true
});
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.outputEncoding = sRGBEncoding;
document.body.appendChild(this.renderer.domElement);
this.initXR();
this.initScene();
window.addEventListener('resize', this.onWindowResize.bind(this), false);
this.renderer.setAnimationLoop(this.render.bind(this));
}
initXR() {
this.renderer.xr.enabled = true;
document.body.appendChild(ARButton.createButton(this.renderer, {requiredFeatures: ['hit-test']}));
this.hitTestSourceRequested = false;
this.hitTestSource = null;
this.controller = this.renderer.xr.getController(0);
this.controller.addEventListener('select', this.onSelect.bind(this));
}
initScene() {
let geometry = new RingGeometry(0.08, 0.10, 32).rotateX(-Math.PI / 2);
let material = new MeshBasicMaterial();
this.reticle = new Mesh(geometry, material);
this.reticle.matrixAutoUpdate = false;
this.reticle.visible = false;
this.scene.add(this.reticle);
const loader = new GLTFLoader();
loader.load('./models/stylized_character.glb', gltf => {
this.myObj = gltf;
gltf.scene.scale.set(.25, .25, .25);
gltf.scene.visible = true;
this.scene.add(gltf.scene);
//todo: this doesnt seem to work
this.mixer = new AnimationMixer(gltf);
var action = this.mixer.clipAction(gltf.animations[0]);
action.play();
});
var aLight = new AmbientLight(0xffffff, 1);
this.scene.add(aLight)
}
render(_, frame) {
const delta = this.clock.getDelta();
if (this.mixer) {
this.mixer.update(delta);
}
if (frame) {
if (this.hitTestSourceRequested === false) {
this.requestHitTestSource();
}
if (this.hitTestSource) {
this.getHitTestResults(frame);
}
}
this.renderer.render(this.scene, this.camera);
}
onWindowResize() {
this.camera.aspect = window.innerWidth / window.innerHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.render(this.scene, this.camera);
}
onSelect() {
if (this.reticle.visible) {
this.myObj.scene.position.setFromMatrixPosition(this.reticle.matrix);
this.myObj.scene.visible = true;
}
}
async requestHitTestSource() {
const session = this.renderer.xr.getSession();
session.addEventListener('end', () => {
this.hitTestSourceRequested = false;
this.hitTestSource = null;
});
const referenceSpace = await session.requestReferenceSpace('viewer');
this.hitTestSource = await session.requestHitTestSource({space: referenceSpace, entityTypes: ['plane']});
this.hitTestSourceRequested = true;
}
getHitTestResults(frame) {
const hitTestResults = frame.getHitTestResults(this.hitTestSource);
if (hitTestResults.length) {
const hit = hitTestResults[0];
const pose = hit.getPose(this.renderer.xr.getReferenceSpace());
this.reticle.visible = true;
this.reticle.matrix.fromArray(pose.transform.matrix);
} else {
this.reticle.visible = false;
}
}
}
window.addEventListener('DOMContentLoaded', () => {
new App();
});