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示例中得到了这个并略微修改了它。

希望这有帮助，一个新的

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

1 个答案: