Javascript ThreeJS动画几何体不'；不更新，但位置会更新吗？

首先，我要说我是Blender/3DS MAX/ThreeJS和图形编程的新手

我从星际争霸编辑器中导出了一个Mutalisk（来自星际争霸）拍打翅膀的动画作为.m3文件，并将其导入Blender。导出后，我可以将生成的.json导入到我的ES6应用程序中，但出于某种原因，使用一个3.Animation，虽然导入的Mutalisk的位置发生了适当的变化，但它会四处摆动，Mutalisk对象的实际摆动不会发生

我的渲染器如下所示：

import THREE from 'three';

export default class Renderer {
  constructor(game, canvas) {
    this.game = game;
    this.canvas = canvas;

    this.scene = new THREE.Scene();

    this.camera = new THREE.PerspectiveCamera(75, this.canvas.width / this.canvas.height, 1, 10000);
    this.camera.position.z = 2;
    this.camera.position.y = 1;

    this.clock = new THREE.Clock;

    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
    this.renderer.setSize( this.canvas.width, this.canvas.height );
  }

  // called by my Game class, which waits for the mesh to load before attempting to add it to the scene
  addMeshToScene(mesh) {
    this.mesh = mesh;

    this.scene.add(this.mesh);

    this.animation = new THREE.Animation(
      this.mesh,
      this.mesh.geometry.animations[ 2 ]
    );

    this.animation.play();
  }

  renderFrame() {
    THREE.AnimationHandler.update(this.clock.getDelta());

    this.renderer.render(this.scene, this.camera);
  }
}

这是渲染图。正如我所说，我的浏览器中的Mutalisk是沿着Y轴反弹的，但不是拍打

有人能解释为什么会发生这种运动，而不是拍打吗

编辑：这是我的搅拌机导出设置

---

已解决。问题是材质必须处于蒙皮模式才能正确包裹骨架。当我从JSON创建网格时，我必须设置

material.skinning=true

import THREE from 'three';

export default class Mesh {
  constructor(name) {
    this.name = name;
    this.loaded = false;
    this.filepath = `./meshes/${this.name}.json`
    this.load();
  }

  load() {
    var loader = new THREE.JSONLoader();
    loader.load(this.filepath, (geometry) => {
      this.geometry = geometry;
      var material = new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } );
      material.skinning = true; // this is where the magic happens
      this.mesh = new THREE.SkinnedMesh(geometry, material);
      this.loaded = true;
    });
  }
}

---

解决了。问题是材质必须处于蒙皮模式才能正确包裹骨架。当我从JSON创建网格时，我必须设置

material.skinning=true

import THREE from 'three';

export default class Mesh {
  constructor(name) {
    this.name = name;
    this.loaded = false;
    this.filepath = `./meshes/${this.name}.json`
    this.load();
  }

  load() {
    var loader = new THREE.JSONLoader();
    loader.load(this.filepath, (geometry) => {
      this.geometry = geometry;
      var material = new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } );
      material.skinning = true; // this is where the magic happens
      this.mesh = new THREE.SkinnedMesh(geometry, material);
      this.loaded = true;
    });
  }
}

---

有趣的是，我刚刚注意到我所有的动画[]每个都有44个步骤。我想这可能是我的Blender导出的问题。你能报告你在导出器中选择了什么动画参数吗？你如何实例化

渲染器

？你在哪里调用

addmeshtosene

，在哪里调用

renderFrame

？在我的游戏类中，有一个安装方法只调用

this.setRenderer（新的渲染器（this，this.canvas））

。我认为这部分代码不是问题所在。在混合器中：几何体：顶点、面、法线、UV、骨骼、蒙皮。应用修改器（选中）几何体UINT16阵列。骨骼动画，休息。嵌入动画。设置，复制纹理。我用当前代码创建了一个repo。我所说的一切都在

client/js/renderer.js中，有趣的是，我刚刚注意到我所有的动画[]每个都有44个步骤。我想这可能是我的Blender导出的问题。你能报告你在导出器中选择了什么动画参数吗？你如何实例化
渲染器
？你在哪里调用
addmeshtosene
，在哪里调用
renderFrame
？在我的游戏类中，有一个安装方法只调用
this.setRenderer（新的渲染器（this，this.canvas））
。我认为这部分代码不是问题所在。在混合器中：几何体：顶点、面、法线、UV、骨骼、蒙皮。应用修改器（选中）几何体UINT16阵列。骨骼动画，休息。嵌入动画。设置，复制纹理。我用当前代码创建了一个repo。我所说的一切都在
client/js/renderer.js