[BUG] Cannot set [levels] property of ThLOD

[ericleib]

ThLOD has a levels property that can be set. But when attempting to use it, the following code yields an error:

<th-lOD [levels]="[
  {object: detailedObj, distance: 0, hysteresis: 0},
  {object: coarseObj, distance: 100, hysteresis: 0},
]">
   ...
</th-LOD

ERROR TypeError: Cannot assign to read only property 'levels' of object 'LOD'

This is because the underlying LOD class enforces usage of addLevel() and removeLevel() methods.

As a workaround, I wrote this directive:

@Directive({ selector: '[lodLevel]'})
export class LODLevelDirective {
  lodLevel = input<{ distance: number, hysteresis?: number }>();
  lod = inject(ThLOD);
  target = inject(ThObject3D);

  _ = effect(() => {
    const lod = this.lod.objRef;
    const lodLevel = this.lodLevel();
    if(lod && this.target.objRef) {
      const previous = lod.levels.find(l => l.object === this.target.objRef);
      if(previous) {
        lod.removeLevel(previous.distance);
      }
      lod.addLevel(this.target.objRef, lodLevel?.distance, lodLevel?.hysteresis)
    }
  });
}

Usage:

<th-lOD>
    <th-group [lodLevel]="{distance: 0}">
         <!-- detailed model -->
    </th-group>
    <th-group [lodLevel]="{distance: 100}">
         <!-- coarse model -->
    </th-group>
</th-lOD>

I'm quite happy with it. If you want I can do a PR to package it in the library?

[demike]

@ericleib looks very promising. Your directive would be a great addition to the library. Looking forward to your PR!

[demike]

@ericleib the original problem is a wrong typing. Added a PR to fix that: three-types/three-ts-types#1887