收藏
回答

xr-gltf组件 如何控制播放glb文件到画面最后一帧停止?

页面加载好了一个glb,使用时xr-gltf组件里加了属性anim-autoplay,则动画重复循环播放

现在的需求是播放一次则停止到最后一帧画面,要如何才能实现呢

回答关注问题邀请回答
收藏

2 个回答

  • loki-witch
    loki-witch
    2023-08-28

    我貌似找到解决方案了。

    根据官方文档提供的demo——[扫描微信球],把源代码导入查看,可以发现关键代码中有相关描述:

    1.首先,在<xr-gltf>中添加的handleGltfLoaded方法中,先获取到wxball的模型,然后从模型中用getComponent获取到Animator(源代码直接搬过来即可)

    2.然后扫描微信球图片,点击后执行代码


    关键点卡在了gltfAnimation这个name上了,因为我的glb文件,我并不知道animation的name,查了好久,后来用了https://gltf-viewer.donmccurdy.com/这个工具,将glb文件拖拽进去,发现animation里只有一个名字,于是放进去测试了一下,发现竟然好使了


    2023-08-28
    有用
    回复 1
    • 一只开心鸭🦆
      一只开心鸭🦆
      01-16
      请问如何只要gltfAnimation是什么名字啊,把glb文件托到你说的工具里没有看到名字
      01-16
      1
      回复
  • CRMEB
    CRMEB
    2023-08-25

    要实现播放一次动画后停止到最后一帧的效果,在xr-gltf组件上添加anim-stop属性即可。

    anim-stop属性控制动画在播放完一次后是否停止。设置为 true 时,动画将在播放完一次后自动停止在最后一帧画面。

    示例代码如下:

    <xr-gltf src="/path/to/your.glb" anim-autoplay anim-stop="true"></xr-gltf>
    


    请确保 xr-gltf 组件已正确加载并渲染了您的 glb 文件,并且在需要播放动画的位置设置了相应的属性。

    如果您的需求是播放一次后停止在第一帧而不是最后一帧,可以尝试使用anim-loop="1"属性,它表示只循环播放一次动画。

    <xr-gltf src="/path/to/your.glb" anim-autoplay anim-loop="1"></xr-gltf>
    


    通过适当选择和设置 anim-stopanim-loop 属性,您可以实现所需的动画播放效果。


    2023-08-25
    有用
    回复 1
    • loki-witch
      loki-witch
      2023-08-25
      感谢及时回复,但我测试了一下,发现不好使,且我看文档里,xr-gltf标签的属性里貌似没有anim-stop这个属性,请问你那边是好使的吗
      2023-08-25
      回复
登录 后发表内容