title: How do I animate multiple objects simultaneously with each having a different KeyFrameTrack in pythreejs?
body: <p>I generate the 4x4 transformation matrices over time for each object in a scene and use the <code>VectorKeyframeTrack</code> to set the transform matrix on a Mesh object. I am able to animate the objects individually with an <code>AnimateAction</code> for each object but cannot figure out how to have all objects animate simultaneously with a single <code>.play()</code> call and keep them in sync. This is as far as I've gotten, hoping that starting with the second loop the objects would be time synchronized, but they aren't:</p>
  
  <pre class="lang-py prettyprint-override"><code>import pythreejs as pjs
  
  rod_mesh = pjs.Mesh(
      pjs.CylinderBufferGeometry(0.005, 0.005, sys.constants[lB] - sys.constants[h] / 2,),
      pjs.MeshStandardMaterial(color='red')
  )
  
  plate_mesh = pjs.Mesh(pjs.PlaneBufferGeometry(sys.constants[h], sys.constants[w]),
                        pjs.MeshStandardMaterial(color='blue', side='DoubleSide'))
  # Animation will not update without this set.
  rod_mesh.matrixAutoUpdate = False
  plate_mesh.matrixAutoUpdate = False
  # Set initial position/orientation
  rod_mesh.matrix = rod_matrices[0]
  plate_mesh.matrix = plate_matrices[0]
  
  # Setup scene
  view_width = 600
  view_height = 400
  camera = pjs.PerspectiveCamera(position=[0.25, 0.25, 0.25], aspect=view_width/view_height)
  key_light = pjs.DirectionalLight(position=[0, 10, 10])
  ambient_light = pjs.AmbientLight()
  scene_pjs = pjs.Scene(children=[rod_mesh, plate_mesh, camera, key_light, ambient_light])
  controller = pjs.OrbitControls(controlling=camera)
  renderer = pjs.Renderer(camera=camera, scene=scene_pjs, controls=[controller], width=view_width, height=view_height)
  
  # Specify KeyframeTracks
  rod_track = pjs.VectorKeyframeTrack(name='.matrix', times=list(sys.times), values=rod_matrices)
  plate_track = pjs.VectorKeyframeTrack(name='.matrix', times=list(sys.times), values=plate_matrices)
  
  rod_clip = pjs.AnimationClip(tracks=[rod_track])
  plate_clip = pjs.AnimationClip(tracks=[plate_track])
  
  rod_mixer = pjs.AnimationMixer(rod_mesh)
  plate_mixer = pjs.AnimationMixer(plate_mesh)
  
  rod_action = pjs.AnimationAction(rod_mixer, rod_clip, rod_mesh)
  plate_action = pjs.AnimationAction(plate_mixer, plate_clip, plate_mesh)
  
  # Try to enforce syncronization among actions at each loop start
  plate_action.exec_three_obj_method('syncWith', 'IPY_MODEL_' + rod_action.get_view_spec()['model_id'])
  rod_action.exec_three_obj_method('syncWith', 'IPY_MODEL_' + plate_action.get_view_spec()['model_id'])
  
  listener_func = '() =&gt; {{ {}.syncWith({}); }}'.format('IPY_MODEL_' + plate_action.get_view_spec()['model_id'], 'IPY_MODEL_' + rod_action.get_view_spec()['model_id'])
  
  rod_mixer.exec_three_obj_method('addEventListener', 'loop', listener_func)
  </code></pre>
  
  <p><code>syncWith()</code> must need to be called at every frame transition but I'm not sure how to affect the animation frame loop from pythreejs.</p>