javascript - Three.js - 动画没有播放

Question

我对通过 blender plugin 导出的动画对象有疑问从 blender 到 THREE.js。动画没有开始运行...

当然，我在从 blender 导出和导入到 THREE.js 库时尝试了很多设置组合，但都没有成功。

这是代码，我认为应该可行。 Comment Critical section 注释可能是错误的地方。源 JSON 的链接也在示例中。当然，我可以提供源 *.blend 文件，如果需要...

var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();

var clock = new THREE.Clock();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);

objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
  scene = loadedScene;
  mesh = scene.children[0];

  scene.background = new THREE.Color('white');
  mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA') });

  hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
  scene.add(hemiLight);

  camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.set(500, 200, -100);

  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, 50, 0);
  controls.update();

  var geometry = new THREE.PlaneBufferGeometry(200, 200);
  var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
  var ground = new THREE.Mesh(geometry, material);

  ground.rotation.x = - Math.PI / 2;

  scene.add(ground);

  mesh.scale.set(-1, -1, 1);

  // Critical section...
  mixer = new THREE.AnimationMixer(mesh);
  var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
  var animation = mixer.clipAction(sequence);
  animation.play();
  // End of critital section

  animate();
});

window.onresize = function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
};

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var delta = 0.75 * clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}

body {
  margin: 0px;
  overflow: hidden;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>

感谢任何建议。

Answer 1

我深入研究了动画并注意到它使用了 morphTargets。然后我想起了这个 example .因此，关键时刻是将 Material 的 .morphTarget 参数设置为 true，因此，我已将其应用于代码片段中的 Material 并开始工作:

mesh.material = new THREE.MeshPhongMaterial({
    map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'),
    morphTargets: true
}); 

虽然，我不确定这种方法是否正确，但至少，它是有效的)

var tgaLoader = new THREE.TGALoader();
var objectLoader = new THREE.ObjectLoader();

var clock = new THREE.Clock();

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;

renderer = new THREE.WebGLRenderer({ antialias: true });

renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
document.getElementById('container').appendChild(renderer.domElement);

objectLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/scavenger.json', function (loadedScene) {
  scene = loadedScene;
  mesh = scene.children[0];

  scene.background = new THREE.Color('white');
  mesh.material = new THREE.MeshPhongMaterial({ map: tgaLoader.load('//cdn.rawgit.com/PiranhaGreg/files/master/SCA_BODY_V0.TGA'), morphTargets: true });

  hemiLight = new THREE.HemisphereLight('white', 'white', 0.6);
  scene.add(hemiLight);

  camera = new THREE.PerspectiveCamera(30, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000);
  camera.position.set(500, 200, -100);

  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, 50, 0);
  controls.update();

  var geometry = new THREE.PlaneBufferGeometry(200, 200);
  var material = new THREE.MeshPhongMaterial({ shininess: 0.1 });
  var ground = new THREE.Mesh(geometry, material);

  ground.rotation.x = - Math.PI / 2;

  scene.add(ground);

  mesh.scale.set(-1, -1, 1);

  // Critical section...
  mixer = new THREE.AnimationMixer(mesh);
  var sequence = THREE.AnimationClip.CreateFromMorphTargetSequence('animation', mesh.geometry.morphTargets, 25, true);
  var animation = mixer.clipAction(sequence);
  animation.play();
  // End of critital section

  animate();
});

window.onresize = function() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
};

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
  var delta = 0.75 * clock.getDelta();
  mixer.update(delta);
  renderer.render(scene, camera);
}

body {
  margin: 0px;
  overflow: hidden;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript"></script>
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>