How to add directive for ngt object and access properties and events

[IRobot1]

I've created a button directive that I can add to an ngt object. When the object is clicked, I want it to briefly animate the object, in this case, a mesh

    <ngt-mesh button (clicked)="message='Button clicked'" [scale]="[0.25, 0.1,0.25]" [position]="[0,0,0]">
      <ngt-cylinder-geometry [args]="[1, 1, 1, 20]"></ngt-cylinder-geometry>
      <ngt-mesh-standard-material [parameters]="{color:'blue'}"></ngt-mesh-standard-material>
    </ngt-mesh>

I've discovered NgtObjectInputsController, but not sure if that's what I should be using to access the host element.

@Directive({
  selector: '[button]',
})
export class DirectiveButtonComponent implements AfterViewInit {

  constructor(
    @Optional() public object3dInputsController: NgtObjectInputsController
  ) {
    console.warn(this.object3dInputsController)
    this.object3dInputsController.click.subscribe(next => {
      console.log('clicked', next.object)
    })
  }

1. If I subscribe to click in the constructor, I see the console message logged. However, if I move this code into AfterViewInit, it doesn't fire anymore.

2. How do I hook into the host elements animateReady handler? The short animation needs to tick for a few 100 milliseconds.

[IRobot1]

The following works. However, the 'object' in NgtObjectController isn't immediately available. Is there a ready event that can be hooked into? This way, I can initialize the mixer once, rather than on every click.

@Directive({
  selector: '[button]',
})
export class DirectiveButtonComponent {

  constructor(
    private object3dController: NgtObjectController,
    private object3dInputsController: NgtObjectInputsController,
  ) {

    this.object3dInputsController.click.subscribe(next => {
      this.mixer = new AnimationMixer(this.object3dController.object);
      this.action = this.mixer.clipAction(this.clip);
      this.action.loop = LoopOnce;
      this.startanimation();
    });
    this.object3dController.animateReady.subscribe(next => {
      if (this.mixer)
        this.tick(next.state);
    })
  }

  @Output() clicked = new EventEmitter<boolean>();
  private clicktime = 0.1;

  private positionKF = new VectorKeyframeTrack('.position', [0, this.clicktime * 2 / 3, this.clicktime], [
    0, 0, 0,
    0, -0.05, 0,
    0, 0, 0,
  ]);

  private clip = new AnimationClip('Action', this.clicktime, [this.positionKF]);
  private mixer!: AnimationMixer;
  private action!: AnimationAction;

  startanimation() {
    this.action.reset();
    this.action.play();
    this.clicked.emit(true);
  }

  tick({ delta }: NgtRender) {
    this.mixer.update(delta);
  }
}

[nartc]

What you have is fine. If you want to create the AnimationMixer once, listen to ready event to create the mixer. Then in click.subscribe(), make sure to check for if (this.mixer) before running your logic.

On other note, I just release 5.0.0-beta.0 and here's how I would do it

@Directive({
  selector: '[button]',
})
export class DirectiveButtonComponent {

  constructor(
      @Self() @Optional() object: NgtObject, // <-- all Object3D has this token provided. Since we want to only attach [button] on an Object, we would want to inject NgtObject
      private store: NgtStore // there is a single Store that tracks all states in the Canvas, as well as registering animation (renamed to beforeRender to match with THREE.js, callbacks that are invoked before next frame gets rendered)
  ) {
    if (!object) {
        // check for object and return early. the user might attach this on a non NgtObject
        return;
    }
    
    object
        .instance$ // all classes in v5 extends NgtInstance which exposes an "instance$" which is an Observable that emits as soon as the underlying THREE instance is initialized
        .pipe(takeUntil(object.destroy$)) // all instances are a ComponentStore which exposes "destroy$"
        .subscribe(object3d => {
            // object3d should be a NgtUnknownInstance<THREE.Object3D> which is just a THREE.Object3D with some internal AngularThree stuffs. You can use it to initialize the mixer now
            // Remember, an instance might get destroyed (ngIf) and re-constructed, you can handle your logic with the Mixer
            this.mixer = new AnimationMixer(object3d);
        });
        
    object
        .click // NgtObject also has these EventEmitters
        .pipe(takeUntil(object.destroy$)) // same as above
        .subscribe(() => {
            // object.instance.value gives you the THREE.Object3d instance if you need to use it
            if (this.mixer) {
                this.action = this.mixer.clipAction(this.clip);
                this.action.loop = LoopOnce;
                this.startAnimation();
            }
        });
        
    // I would use the store.registerBeforeRender() to register the animation instead of subscribing to animateRead
  }

  @Output() clicked = new EventEmitter<boolean>();
  private clicktime = 0.1;

  private positionKF = new VectorKeyframeTrack('.position', [0, this.clicktime * 2 / 3, this.clicktime], [
    0, 0, 0,
    0, -0.05, 0,
    0, 0, 0,
  ]);

  private clip = new AnimationClip('Action', this.clicktime, [this.positionKF]);
  private mixer!: AnimationMixer;
  private action!: AnimationAction;

  startAnimation() {
    this.action.reset();
    this.action.play();
    this.clicked.emit(true);
  }

  ngOnInit() {
    // remember to unregister the callback. registerBeforeRender() returns the animationUuid that can be used to unregister
    this.store.registerBeforeRender({
       callback: ({ delta }) => {
         if (this.mixer) {
           this.mixer.update(delta);
         }
       }
    })
  }
}