threejs - mapping konvertierte JSON-Animationen in Schieberegler, nicht voll funktionsfähig

Question

Ich habe ein skinned.dae-Mesh in JSON umgewandelt unter Verwendung von this loader. Ich lade es jetzt in einer Szene hoch und - da seine Animationen nicht als tatsächliche Animation, sondern als Bewegungsbereiche für das Model posing gedacht sind, versuche ich, diese Animationen Slidern zuzuordnen. Relevante Code:

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); 

ich sie dann initialisieren:

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

und dann in einem IIFE erstellen Schieber und Karte die Animationen:

(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); 
}()); 

Das funktioniert aber gibt mir eine überraschend begrenzte Reichweite der Bewegung in jeder Animation - was bedeutet, dass die Animation nicht vollständig ausspielt (dh alle Keyframes), nur kleine Bewegungen.

Irgendwelche Ideen, warum das passieren könnte? Ich bin mit meinem Latein am Ende.

Sie können den Live-Code here finden.

Alle/alle Hilfe wäre sehr geschätzt - danke!

Answer 1

Haben Sie Materialien nach dem Laden noch zu morphen?

Ich habe dies aus dem JSON Loader Beispiel in three.js Website und änderte es leicht.

hoffte, das hilft, A newb