关于javascript：Three.js-动画无法播放


Three.js - Animation is not playing

我对通过Blender插件从Blender导出到THREE.js的对象进行动画处理时遇到问题。动画未开始运行...

当然，当我从Blender导出并导入到THREE.js库时，我尝试了许多设置组合，但没有成功。

这里是代码，我认为应该可以。注释关键部分注释哪里可能有一些错误。在示例中也链接到源JSON。当然，如果需要，我可以提供源* .blend文件...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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);
}
1
2
3
4
body {
  margin: 0px;
  overflow: hidden;
}
1
2
3
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js">
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript">
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js">

谢谢您的任何建议。

相关讨论

我深入研究了动画，发现它使用了morphTargets。然后我想起了这个例子。因此，关键时刻是将材料的.morphTarget参数设置为true，因此，我已将其应用于代码段中的材料，它开始起作用：

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

不过，我不确定这种方法是否正确，但至少可以正常使用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
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);
}
1
2
3
4
body {
  margin: 0px;
  overflow: hidden;
}
1
2
3
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/87/three.min.js">
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/TGALoader.js" type="application/javascript">
<script src="//cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js">

相关讨论