Apply animations to different layers in a hierarchic Object3D

Questions
1

Dear all, I am a newbie in ThreeJS and appreciate the great opportunities with this technique. I would be grateful for any help or hint regarding the following challenge which I cannot resolve on my own despite many days of investigations.

At first the background:
I load a GLTF object, a glb which I had exported from Blender. In Blender, this object has no animations. I want to add the animations I need in my js code based on threeJS.

This object has an internal structure:

  • Main object (Object3D)
    • 3 Sections (children also of type Object3D)
      • 2 Meshs in each of the 3 sections
        I want to keep this structure because it is useful. For example when I want to change the position or rotation of the entire main object, I can achieve it on this upper layer. But I also want to change the color of individual meshes independently. This however I have to do on the lowest level to the meshes.

I have used the relevant Animation methods (AnimationMixer, AnimationActions, VectorKeyframeTrack, ColorKeyframeTrack etc.) based on published examples and got it working. BUT only on 1 level at a time. E.g. I can apply the position changes to the main Object3D while I cannot change the color on the 3rd level. Or I can change the color on the meshes but cannot change the position of the entire object.

I guess that I have to use an array of AnimationMixer (?) But I do not know how exactly this has to be coded and how this method has to be applied in the various stages which are:

  • make the AnimationClips
  • make the AnimationMixers
  • consider it in the model.tick = (delta)
  • consider it in the loop.js
  • consider it in the renderer

I have not found any document which explains the proper method. In case someone has an example, that would be very helpful. Or someone can explain the principle to me with the core sections of the code. (Typically the creation and use of the array in this context.)

I think it is too much when I load all my code but here some parts of the most important elements:
(I use only the part of code which works for Level3, the meshes.)

  1. in setupModle.js
    function setupModel(data) {
    data.animations[0] = getAnimationClip(‘Object’); // provides positionKF
    data.animations[1] = getAnimationClip(‘Lvl3’); // provides colorKF

    const model = data.scene.children[0];
    const clipLvl3 = data.animations[1];
    const mixerLvl3 = new AnimationMixer(model.children[0].children[0]);
    const actionLvl3 = mixerLvl3.clipAction(clipLvl3);
    actionLvl3.setLoop( LoopOnce )
    actionLvl3.play();
    model.tick = (delta) => mixerLvl3.update(delta);
    return model;
    }

  2. Creation of the colorKeyFrame
    var colorKF = new ColorKeyframeTrack( ‘.material.color’, [ 0, 2, 6, 8 ], [ 0.1,0.5,0.8, 1,0,0, 1,1,1 ,0,1,1], InterpolateDiscrete );

  3. Creation of the AnimationClip
    const colorKF = getAnimationColors();
    const myClipLvl3 = new AnimationClip(‘ForLevel 3’, length, [ colorKF]);
    return myClipLvl3;

  4. In renderer function start:
    this.renderer.setAnimationLoop(() => {
    this.tick();
    this.renderer.render(this.scene, this.camera);
    }

  5. In renderer function tick
    tick() {
    const delta = clock.getDelta();
    for (const object of this.updatables) {
    object.tick(delta);
    }
    }

Thanks
Peter