Moving instancedMesh individual instances

[Polyterative]

Following this question I was able to build a grid of objects.
Now I want to apply transforms to their position in realtime based on external inputs (vector field in the future).

I'm unable to understand how to transform the individual objects like moving only 1 specific instance.
InstancedMesh's children are always []. How am I supposed to access individual instances?

I'm using

"@angular-three/core":               "^4.5.0",
"@angular-three/postprocessing":     "^4.5.0",
"@angular-three/schematics":         "^4.5.0",
"@angular-three/soba":               "^4.5.0",

My code

gap = 1
  numberOfItems: number = 1024;
  numberOfRows: number = Math.sqrt(this.numberOfItems);
  numberOfColumns: number = Math.sqrt(this.numberOfItems);

  data = new Array(this.numberOfItems).fill(0).map((d, index) => ({
    position: new Vector3(Math.floor(index / this.numberOfRows) * this.gap, 0, (index % this.numberOfColumns) * this.gap - 15),
    // scale: new Vector3(Math.random(), Math.random(), Math.random()),
    scale: new Vector3(.1, .1, .1),
    color: new Color().setHex(Math.random() * 0xffffff) //.setColorName('white')
  }));

  ready(inst: InstancedMesh) {

    this.data.forEach((item, index) => {
      const matrix = new Matrix4();
      matrix.setPosition(item.position);
      matrix.scale(item.scale);
      inst.setMatrixAt(index, matrix);
      inst.instanceMatrix.needsUpdate = true;

      // inst.setColorAt(index, item.color);
    })
  }

onAnimationReady($event: { state: NgtRender; object: InstancedMesh }): void {

    let { state, object } = $event;

    console.log('animation ready', state, object);

    // doesn't work
    object.matrix.makeTranslation(1, 0, 0);

    // trying to move the individual instances closer to the center 0,0,0, no effects
    object.children.forEach((child, index) => {

      let distanceFromCenter = child.position.distanceTo(new Vector3(0, 0, 0));

      // move the individual instance closer to the center 0,0,0
      child.position.add(new Vector3(-distanceFromCenter / 100, -distanceFromCenter / 100, -distanceFromCenter / 100));

    });

    this.changeDetector.markForCheck();
    this.changeDetector.detectChanges();

  }

<ngt-instanced-mesh #inst="ngtInstancedMesh"
                    [args]="[data.length]"
                    (ready)="ready(inst.mesh)"
                    (animateReady)="onAnimationReady($any($event))"
>
  <ngt-sphere-geometry></ngt-sphere-geometry>
  <ngt-mesh-standard-material></ngt-mesh-standard-material>
</ngt-instanced-mesh>

visual out:

[IRobot1]

You were close. I'll let you fix the movement logic.

  onAnimationReady($event: { state: NgtRender; object: Object3D }): void {
    let object = <InstancedMesh>$event.object;

    this.data.forEach((child, index) => {
      let distanceFromCenter = child.position.distanceTo(new Vector3(0, 0, 0));

      // move the individual instance closer to the center 0,0,0
      child.position.add(new Vector3(-distanceFromCenter / 100, -distanceFromCenter / 100, -distanceFromCenter / 100));

      const matrix = new Matrix4();
      matrix.setPosition(child.position);
      matrix.scale(child.scale);
      object.setMatrixAt(index, matrix);
    });

    object.instanceMatrix.needsUpdate = true;
  }

[Polyterative]

That worked a treat, thanks a lot!

We need to use the mesh and set the matrix during each frame via setMatrixAt(), got it!

Instancing is really a game changer for my use case.

I've uploaded the working setup for any future user working with this!
Polyterative/POLY_REACTIVE_VISUALS@d319f4b

Result: