动态添加模型：

<xr-asset-load type="gltf" asset-id="{{modelitem.uid}}" src="{{modelitem.url}}"/>

<xr-gltf  id="{{modelitem.uid}}" model="{{modelitem.uid}}" position="{{modelitem.position}}"  scale="{{modelitem.scale}}"  bind:gltf-loaded="handleGLTFLoaded"  bind:anim-stop="handleAnimationStop"/>

获取模型对象并控制播放：

            const xrSystem = wx.getXrFrameSystem();

            const el = this.scene.getElementById(modelUid);//必须在handleGLTFLoaded执行之后

            const animator = el?.getComponent(xrSystem.Animator);

            if (!animator) return;

            animator.play(animation);

            animator.stop(animation);

我有个需求是监听animator播放，暂停和停止状态，目前只知道在动画组件绑定anim-stop方法还有其他监听状态的实现方法吗

已解决

要将一个包含动画的glb文件添加到基础模型中并控制播放，可以使用以下步骤：

1. 首先，确保已经加载了XR-Frame库和Three.js库。

2. 创建一个基本的glb模型，并将其添加到场景中。例如：

const gltfLoader = new THREE.GLTFLoader();
const scene = new THREE.Scene();

gltfLoader.load('path/to/your/base_model.glb', (gltf) => {
  scene.add(gltf.scene);
});

3. 加载包含动画的glb文件。在加载完成后，将其动画添加到基础模型上。例如：

gltfLoader.load('path/to/your/animated_model.glb', (gltf) => {
  // 获取动画数据
  const animations = gltf.animations || [];

  // 遍历动画数据，将每个动画添加到基础模型上
  animations.forEach((animation) => {
    const mixer = new THREE.AnimationMixer(gltf.scene);
    mixer.clipAction(animation).play();
  });

  // 将包含动画的模型添加到场景中
  scene.add(gltf.scene);
});

4. 现在，基础模型已经包含了动画。要控制动画的播放，可以使用`mixer`对象的`update()`方法。例如：

// 更新动画混合器，使动画向前播放一帧
mixer.update(0.016); // 参数为时间间隔，可以根据需要调整

5. 如果需要循环播放动画，可以使用`loop`属性。例如：

// 设置动画循环播放次数，默认为1，设置为Infinity表示无限循环
mixer.clipAction(animation).loop = Infinity;