请问webar加载带动画的fbx模型怎么做

Question

只会加载不带动画的obj模型,不知道如何加载带动画的fbx模型

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要加载带动画的FBX模型，你需要使用一个可以解析FBX文件并添加动画的数据处理库。以下是一个使用Three.js和three.js-animations库来加载带动画的FBX模型的例子：

首先，确保你已经安装了这三个库：Three.js、three.js-animations以及@three/demos/objects/fbx。

然后，在你的HTML文件中引入这些库：

<script src="https://cdn.jsdelivr.net/npm/three@0.126.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three.js-extensions@1.5/dist/three.js.extensions.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three.js-extensions@1.5/dist/three.js.animations.min.js"></script>

接下来，创建一个用于显示FBX模型的div，并设置其宽度和高度为窗口宽度的一半：

<div id="model-container">
  <canvas id="webgl" width="300" height="300"></canvas>
</div>

<canvas id="webgl-animation" width="300" height="300"></canvas>

在JavaScript部分，你可以使用以下代码来加载FBX模型并设置动画：

var loader = new THREE.FBXLoader();
loader.load('path/to/your/model.fbx', function (object) {
  object.traverse(function (child) {
    if (child.isMesh) {
      child.material.animationCurve = new THREE.AnimationCurve([
        new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(1, 0, 0),
        new THREE.Vector3(0, 1, 0),
        new THREE.Vector3(0, 0, 1)
      ]);
    }
  });

  var container = document.getElementById("model-container");
  container.appendChild(object.scene);

  // Add animation to the model
  object.scene.add(new THREE.AnimationMixer(object).clipAnimation("animationName", 0));
}, function (xhr) {
  console.error('The file could not be loaded: ' + xhr.statusText);
});

在这个例子中，我们首先初始化了一个新的THREE.FBXLoader()实例，并设置了加载器的目标文件路径（在这里是你的FBX模型）。然后，我们在回调函数中遍历树，检查每个子对象是否是THREE.Mesh类型，如果是，则将其材质的动画曲线设置为一个包含三个不同位置的矢量数组。最后，我们将模型添加到容器中，并给它添加了一个动画，其中包含了动画名称和从0开始的时间点。

注意，你需要将'path/to/your/model.fbx'替换为你实际的FBX模型路径，而'animationName'应该是你想要应用到模型上的动画名称。

此外，这个示例只适用于渲染模式。如果你希望在WebGL上实时渲染，那么你可能需要使用其他技术或方法，例如WebGL Animation Extensions（WAAV）或WebGL Shaders。