Play multi animation with model viewer , using mixer instance

276 Views Asked by At

i am trying to play multi animations in parellal since package doesnt support that , i am trying to access instance of mixer from scene with the following code

const $scene = Object.getOwnPropertySymbols(modelViewer).filter(symbol => symbol.description === 'scene')[0]; 
const scene = modelViewer[$scene]; 
console.log(scene); 
const clips = scene.animations; 
console.log(clips); 
console.log(scene.mixer); 
scene.mixer.clipAction(clips[0]).play();

i get instance of mixer and scene but animation doesn't play

console log

i have tried to play animation , but it doesn't work at all

1

There are 1 best solutions below

0
Vincent On

I tried more or less the same - using an animationmixer like in three.js to play two animations in model-viewer. As far as I understood (and researched) this is not possible out of the box and needs to be implemented (though it seems not to be impossible, as the model-viewer code highly depends on three.js and therefore can be extended).

However, I found a workaround which works for some usecases. I have a model with two individually moving parts (let's say a sideboard with a door and a drawer). In model-viewer, I added two sliders, the 1st controlling the door and the 2nd controlling the drawer. In blender I created an animation with 3*3 frames, each showing a different combination of the opening angle and opening position of the door and drawer. When exporting to glb, it is important to pack all animations into one. So I get something like this:

  1. Frame: door open 0% / drawer open 0%
  2. Frame: door open 50% / drawer open 0%
  3. Frame: door open 100% / drawer open 0%
  4. Frame: door open 0% / drawer open 50%
  5. Frame: door open 50% / drawer open 50%
  6. Frame: door open 100% / drawer open 50%
  7. Frame: door open 0% / drawer open 100%
  8. Frame: door open 50% / drawer open 100%
  9. Frame: door open 100% / drawer open 100%

The sliders chose - dependent on the other slider's current value - the correct frame to show. Of course you can refine this by adding more frames etc. But it works quite well (and especially smooth!) and is extendable to more objects, though it becomes more complex.