NgtsHTML seems to ignore LOD (NgtsDetailed)

[ericleib]

It seems that when I put HTML inside an LOD with NgtsHTML, this HTML is always displayed, regardless of the distance.

For example, the following component displays a cube and an HTML element inside an LOD. The cube appears and disappears as expected when I zoom in and out. However, this has no effect on the visibility of the HTML element.

@Component({
  selector: 'app-test',
  template: `
    <ngts-detailed [distances]="[0, 5, 20]">
      <ngt-group/>
      <ngt-group>
        <ngt-mesh>
          <ngt-box-geometry />
          <ngt-mesh-basic-material />
        </ngt-mesh>
        <ngts-html [options]="{ position: [1,1,1] }">
          <div htmlContent>Hello world</div>
        </ngts-html>
      </ngt-group>
      <ngt-group/>
    </ngts-detailed>
  `,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [NgtsDetailed, NgtsHTML],
})
export class Test {}

I'd be happy to contribute a PR to solve this if you could point me in the right direction.

[ericleib]

FYI, I implemented this (ugly) directive to go around the problem.

@Directive({
  selector: '[isInActiveLOD]'
})
export class isInActiveLOD {
  isInActiveLOD = input.required<Object3D>();

  private _template = inject(TemplateRef);
  private _detailed = inject(NgtsDetailed, {optional: true});
  private _viewContainer = inject(ViewContainerRef);
  private _thenViewRef: EmbeddedViewRef<any> | null = null;

  isVisible = signal(false);

  constructor() {
    beforeRender(() => {
      const obj = this.isInActiveLOD();
      const lod = this._detailed?.lodRef().nativeElement;
      if(lod) {
        const level = lod.levels[lod.getCurrentLevel()].object;
        this.isVisible.set(!!level.getObjectById(obj.id));
      }
      else {
        this.isVisible.set(true);
      }
    });

    effect(() => {
      if(this.isVisible()) {
        if (!this._thenViewRef) {
          this._viewContainer.clear();
          if (this._template) {
            this._thenViewRef = this._viewContainer.createEmbeddedView(
              this._template,
            );
          }
        }
      }
      else {
        this._viewContainer.clear();
        this._thenViewRef = null;
      }
    })
  }
}

Usage:

<ngts-html #html [options]="{ position: position}">
    <div *isInActiveLOD="html.groupRef().nativeElement" [htmlContent]="{center: true}">
        <span>Hello world</span>
    </div>
</ngts-html>