threejs - 将转换后的 JSON 动画映射到滑块，不能完全正常工作

Question

我已使用 this loader 将 skinned.dae 网格转换为 JSON。我现在将它加载到一个场景中，并且 - 因为它的动画不是作为实际动画，而是用于模型姿势的运动范围，所以我试图将这些动画映射到滑块。相关代码：

var loader = new THREE.JSONLoader();
var animation;
loader.load('phases/1/1.json', function(geometry, materials) {
var mesh = new THREE.SkinnedMesh(geometry, new THREE.MeshFaceMaterial(materials));

scene.add(mesh);
console.log(mesh.geometry);
mesh.scale.set(1, 1, 1);
materials.forEach(function(i) { i.skinning = true });

var clip = mesh.geometry.animations[0];
var clip2 = mesh.geometry.animations[1];
var clip3 = mesh.geometry.animations[2];
var clip4 = mesh.geometry.animations[3];
var clip5 = mesh.geometry.animations[4];

mixer = new THREE.AnimationMixer(mesh);

action = mixer.clipAction(clip);
action2 = mixer.clipAction(clip2);
action3 = mixer.clipAction(clip3);
action4 = mixer.clipAction(clip4);

然后我初始化它们：

action.play();
action.paused = true;
action2.play();
action2.paused = true;
action3.play();
action3.paused = true;
action4.play();
action4.paused = true;

然后在 IIFE 中创建滑块并映射所述动画：

(function() {

var container = document.querySelector('div#sliders'),
slider    = document.createElement('input'),
attrs     = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider2   = document.createElement('input'),
attrs2    = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider3   = document.createElement('input'),
attrs3    = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
slider4   = document.createElement('input'),
attrs4    = { 'type': 'range', 'min': 0, 'max': 1, 'step': 0.01 };
Object.keys(attrs).forEach(function(i) { slider.setAttribute(i, attrs[i]);});
Object.keys(attrs2).forEach(function(i) { slider2.setAttribute(i, attrs2[i]) });
Object.keys(attrs3).forEach(function(i) { slider3.setAttribute(i, attrs3[i]) });
Object.keys(attrs4).forEach(function(i) { slider4.setAttribute(i, attrs4[i]) });
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
slider.addEventListener('input', function(evt) {
action.time = parseFloat(this.value * action.getClip().duration);
  console.log(action.time);
});
slider2.addEventListener('input', function(evt) {
action2.time = parseFloat(this.value * action2.getClip().duration);
});
slider3.addEventListener('input', function(evt) {
action3.time = parseFloat(this.value * action3.getClip().duration);
});
slider4.addEventListener('input', function(evt) {
action4.time = parseFloat(this.value * action4.getClip().duration);
});

container.appendChild(slider);
container.appendChild(slider2);
container.appendChild(slider3);
container.appendChild(slider4);
}());

这可行，但在每个动画中给我的运动范围令人惊讶地有限 - 也就是说，动画没有完全播放（即所有关键帧），只是微小的运动。

任何想法为什么会发生这种情况？我已经束手无策了。

您可以找到实时代码here。

任何/所有帮助将不胜感激 - 谢谢！

Answer 1

你有没有将加载后的材质设置为变形？

for (var m=0; m<materials.length; m++){
    var material = materials[ m ];
    material.morphTargets = true;
}

我从 three.js 网站的 json loader 示例中得到了这个并稍作修改。

希望这会有所帮助， 一个新人