ThreeJS Animation幾何不會更新，但位置會更新嗎？

Question

首先，我會說我是Blender / 3DS MAX / ThreeJS和圖形編程的新手。

我從星際爭霸編輯器中導出了一個互斥體動畫（來自《星際爭霸》），並將其拍打成.m3文件，並將其導入Blender。 導出后，我能夠將生成的.json導入到我的ES6應用程序中，但是由於某種原因，使用THREE.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軸彈跳，但沒有擺動。

誰能闡明運動發生的原因，而不是撲動的原因？

編輯：這是我的Blender導出設置。

Answer 1

解決了。 問題在於材料必須處於蒙皮模式才能正確包裹骨架。 當我從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;
    });
  }
}