How do I animate multiple objects simultaneously with each having a different KeyFrameTrack in pythreejs?

Question

I generate the 4x4 transformation matrices over time for each object in a scene and use the VectorKeyframeTrack to set the transform matrix on a Mesh object. I am able to animate the objects individually with an AnimateAction for each object but cannot figure out how to have all objects animate simultaneously with a single .play() 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:

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 = '() => {{ {}.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)

syncWith() must need to be called at every frame transition but I'm not sure how to affect the animation frame loop from pythreejs.

Answer 1

A solution was given here:

https://github.com/jupyter-widgets/pythreejs/issues/262

The key is to animate the scene instead of the individual meshes and the trick to do so is to name the meshes and then use scene/<mesh name>.<attribute to change> when setting up the KeyFrameTracks. Here is my example that was reworked:

rod_mesh = pjs.Mesh(pjs.CylinderBufferGeometry(0.005, 0.005, sys.constants[lB] - sys.constants[h] / 2),
                    pjs.MeshStandardMaterial(color='red'),
                    name='rod'  # name each mesh!
)

plate_mesh = pjs.Mesh(pjs.PlaneBufferGeometry(sys.constants[h], sys.constants[w]),
                      pjs.MeshStandardMaterial(color='blue', side='DoubleSide'),
                      name="plate"  # name each mesh!
)

# For updating the transform matrices directly set:
rod_mesh.matrixAutoUpdate = False
plate_mesh.matrixAutoUpdate = False

# Scene setup
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)

# Key thing here is to set the attribute you want to change as a sub-item of the scene. Use the names of the meshes above.
rod_track = pjs.VectorKeyframeTrack(name='scene/rod.matrix',
                                    times=list(sys.times),
                                    values=rod_matrices)
plate_track = pjs.VectorKeyframeTrack(name='scene/plate.matrix',
                                      times=list(sys.times),
                                      values=plate_matrices)

# Now create a single clip with both tracks and animate the scene:
clip = pjs.AnimationClip(tracks=[rod_track, plate_track], duration=sys.times[-1])
action = pjs.AnimationAction(pjs.AnimationMixer(scene_pjs), clip, scene_pjs)

Here is my fully working example:

https://gist.github.com/moorepants/c5ebb846499c4002744b8c101705015f