javascript - A-frame 播放来自 sketchfab 的特定动画

标签 javascript jquery three.js aframe webvr

我正在使用 A 帧 ( https://aframe.io ) 创建场景。

我正在尝试在我的场景中放置一只乌鸦的 gltf 模型,来自 sketchfab .

来自 sketchfab 的乌鸦模型有两个不同的动画 - 一个移动姿势和一个静态姿势。由于 gltf 在模型中内置了两种不同的动画,当我将它放入我的场景时,模型没有动画,因为它处于默认的静态姿势。

如何让乌鸦 gltf 模型进入我的动画场景,以便播放 TakeOff 动画?

只是为了澄清,我正在寻找一种方法来专门引用 gltf 模型上的 TakeOff 动画,这样模型就不会动画,而应该动画 TakeOff 动画。 crow gltf 模型的链接:https://sketchfab.com/3d-models/crow-d5a9b0df4da3493688b63ce42c8a83e2

gltf 模型引入我的场景的代码:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.com/a9b3accf-725d-4891-aa13-0786dd661cab%2Fscene%20-%202021-07-01T193347.857.glb?v=1625193238260" position="20 0 -35" rotation="0 90 0" scale="1 1 1" animation-mixer="clip:Take 001; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

最佳答案

为了使用animation-mixer,你应该包括aframe-extras ,它是其中的一部分。您可以使用他们的 cdn,如下面的代码所示。

您要查找的剪辑名为 root|takeOff,您将在代码中看到这一点。

(此外,您发布的代码有一个不同的 glTF,即 wardrode 而不是您正在寻找的乌鸦;因此您应该将 {{YOUR MODEL}} 替换为乌鸦。)

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<a-scene>
  <a-entity gltf-model="{{YOUR MODEL}}" position="20 0 -35" rotation="0 90 0" scale="1 1 1" animation-mixer="clip:root|TakeOff; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

您可以使用的其他动画有 root|LookAroundroot|Eat

关于javascript - A-frame 播放来自 sketchfab 的特定动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68137836/

相关文章:

php - 在数据库中插入图像属性

javascript - 单击按钮时旋转图像

javascript - 淡入jquery div显示

three.js - 如何在threejs中通过raycaster从交叉检查中排除辅助对象?

javascript - 了解弱 map

javascript - 在textextjs插件中添加额外数据

jquery - 使用 CSS 和 jQuery 在行和列中并排对齐 H 标签

javascript - getusermedia 视频未绘制在 Three.js 平面上

three.js - 如何使用 Three.js 版本 54 隐藏/显示对象?

javascript - 为什么在这个简单的 addEventListener 函数之后使用 'false'?