uniApp使用XR-Frame创建3D场景(6)播放模型动画

Ltanke2024-03-29 11:26

上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用

这篇我们讲解播放模型动画

先看源码

XML 复制代码

<xr-scene render-system="alpha:true" bind:ready="handleReady">
<xr-node visible="{{sec6}}">
    <xr-light type="ambient" color="1 1 1" intensity="2" />
    <xr-light type="spot" position="3 3 3" color="1 1 1" range="3" intensity="5" />
    <xr-asset-load options="ignoreError:-1" type="gltf" asset-id="miku" src="https://mmbizwxaminiprogram-1258344707.cos.ap-guangzhou.myqcloud.com/xr-frame/demo/miku.glb" />
    <xr-gltf model="miku" position="0 -1.2 0" scale="0.1 0.1 0.1" rotation="0 180 0" anim-autoplay />
  </xr-node>
  <xr-camera id="camera"  clear-color="0 0 0 0" position="1 1 2" target="miku" camera-orbit-control/>
</xr-scene>

1.加载模型资源

**<xr-asset-load>标签，**通过这个标签我们可以加载模型资源.

**<xr-gltf>标签,**通过这个标签，我们将加载完的模型资源添加到场景中。

如果这个gltf模型本身包含动画，只需要在<xr-gltf>标签中加入anim-autoplay属性。模型中的动画就可以自动播放了。

2.在微信开发者工具中查看

这里给大家推荐一个微信小程序 3D模型素材库，这个小程序中的模型都是针对小程序优化后的glb格式文件，体积小，加载快，非常适合小程序使用