How to access THREE object inside a ng-template/ng-container

[IRobot1]

Can you provide an example of writing a directive for ngt-group or ngt-mesh?

I have an ngt-group that when clicked, does a small animation

<ngt-group #button (click)="startanimation()" (animateReady)="tick($event.state)">
  <ngt-mesh [scale]="[0.5,0.1,0.5]" [position]="[0,0,0]">
    <ngt-box-geometry></ngt-box-geometry>
    <ngt-mesh-standard-material [parameters]="{color:'hotpink'}"></ngt-mesh-standard-material>
  </ngt-mesh>
</ngt-group>

Initially, I thought of using ng-template/ng-content to replace the inner mesh. However, the mesh no longer moves with the group since it is not a child of the group. Should it be?

    <content-button >
      <ngt-mesh [scale]="[0.5,0.1,0.5]" [position]="[0,0,0]">
        <ngt-box-geometry></ngt-box-geometry>
        <ngt-mesh-standard-material [parameters]="{color:'hotpink'}"></ngt-mesh-standard-material>
      </ngt-mesh>
    </content-button>

and 

<ngt-group #button (click)="startanimation()" (animateReady)="tick($event.state)">
  <ng-template #content>
    <ng-content></ng-content>
  </ng-template>
  <ng-container #test [ngTemplateOutlet]="content">
  </ng-container>
</ngt-group>

I'd like to programmatically add the mesh as a child of the group, but I can't figure out how to get at the container's first THREE object.

Any help or guidance is appreciated

[nartc]

Initially, I thought of using ng-template/ng-content to replace the inner mesh

Replace with what?

[IRobot1]

The ngt-mesh in the content-button. content-button is the first ngt-group

    <content-button >
      <ngt-mesh [scale]="[0.5,0.1,0.5]" [position]="[0,0,0]">
        <ngt-box-geometry></ngt-box-geometry>
        <ngt-mesh-standard-material [parameters]="{color:'hotpink'}"></ngt-mesh-standard-material>
      </ngt-mesh>
    </content-button>

[nartc]

@IRobot1 Gotcha. So that's how Angular Content Projection works (I hate it)

<ngt-group>
   <ngt-mesh> <!-- this is fine, the Mesh can find the Group as its parent -->


<content-button> <!-- this wraps the ngt-group -->
   <ngt-mesh> <!-- Angular does not give this Mesh the inner Group injector :( -->

To get around this (as a feature, not a workaround 😅), is to adjust your content-button a little bit

@Component({
   template: `
      <ngt-group #ngtGroup="ngtGroup">
         <ng-container *ngIf="content" [ngTemplateOutlet]="content" [ngTemplateOutletContext]="{ parent: ngtGroup.group }"></ng-container>
      </ngt-group>
      <ng-content></ng-content>
   `,
})
export class ContentButton {
   @ContentChild(TemplateRef) content?: TemplateRef<unknown>;
}

Now, you can do the following with the context:

<content-button>
   <ng-template let-parent="parent">
      <ngt-mesh [appendTo]="parent"></ngt-mesh>
   </ng-template>
</content-button>

I need to double check if appendTo receives a () => THREE.Object3D or THREE.Object3D. This whole mess is unfortunately needed in Angular. In my rewrite, this is a bit more straightforward but will still prove a lot of boilerplate to get it working correctly with "Wrapper Object" (ContentButton is a wrapper object because it wraps the ngt-group)