intersect / NgtsIntersect

Utilities for tracking whether an object is within the camera’s view frustum. Uses THREE.js’s built-in frustum culling by monitoring onBeforeRender calls.

intersect Function

Creates a signal that tracks whether an object is visible in the camera’s frustum.

Signature

1
function intersect<TObject extends THREE.Object3D>(
2
  object: () => ElementRef<TObject> | TObject | undefined | null,
3
  options?: { injector?: Injector; source?: WritableSignal<boolean> },
4
): Signal<boolean>;

Usage

1
import { intersect } from 'angular-three-soba/misc';
2

3
@Component({
4
  template: `
5
    <ngt-mesh #mesh>
6
      <ngt-box-geometry />
7
      <ngt-mesh-basic-material />
8
    </ngt-mesh>
9
  `,
10
})
11
class MyComponent {
12
  meshRef = viewChild<ElementRef<THREE.Mesh>>('mesh');
13
  isVisible = intersect(() => this.meshRef());
14

15
  constructor() {
16
    effect(() => {
17
      if (this.isVisible()) {
18
        // Object is in view - start expensive animations
19
        console.log('Mesh is visible');
20
      } else {
21
        // Object is out of view - pause expensive operations
22
        console.log('Mesh is hidden');
23
      }
24
    });
25
  }
26
}

Parameters

Parameter	Type	Description
`object`	`() => ElementRef<Object3D> \| Object3D \| null`	Signal of the object to track
`options`	Object (optional)	Configuration options

Options

Property	Type	Description
`injector`	`Injector`	Custom injector for dependency injection
`source`	`WritableSignal<boolean>`	External signal to sync visibility state

Return Value

Returns a read-only Signal<boolean> that emits true when the object is visible in the frustum.

NgtsIntersect Directive

A directive that tracks whether the host Object3D is in the camera frustum. Provides two-way binding for visibility state.

Usage

1
<ngt-mesh [(intersect)]="isInView">
2
  <ngt-box-geometry />
3
  <ngt-mesh-basic-material />
4
</ngt-mesh>

1
@Component({...})
2
class MyComponent {
3
  isInView = signal(false);
4

5
  constructor() {
6
    effect(() => {
7
      console.log('Mesh visible:', this.isInView());
8
    });
9
  }
10
}

One-Way Binding

1
<ngt-mesh (intersectChange)="onVisibilityChange($event)">
2
  <ngt-sphere-geometry />
3
  <ngt-mesh-standard-material />
4
</ngt-mesh>

1
onVisibilityChange(isVisible: boolean) {
2
  console.log('Visibility changed:', isVisible);
3
}

Use Cases

Pause Animations When Off-Screen

1
class AnimatedMesh {
2
  meshRef = viewChild<ElementRef<THREE.Mesh>>('mesh');
3
  isVisible = intersect(() => this.meshRef());
4

5
  constructor() {
6
    beforeRender(({ delta }) => {
7
      if (this.isVisible()) {
8
        // Only animate when visible
9
        this.meshRef()?.nativeElement.rotation.y += delta;
10
      }
11
    });
12
  }
13
}

Lazy Load Content

1
class LazyContent {
2
  containerRef = viewChild<ElementRef<THREE.Group>>('container');
3
  hasBeenVisible = signal(false);
4
  isVisible = intersect(() => this.containerRef());
5

6
  constructor() {
7
    effect(() => {
8
      if (this.isVisible() && !this.hasBeenVisible()) {
9
        this.hasBeenVisible.set(true);
10
        this.loadHeavyContent();
11
      }
12
    });
13
  }
14
}

Performance Optimization

1
class OptimizedScene {
2
  objects = viewChildren<ElementRef<THREE.Mesh>>('object');
3

4
  // Track visibility for each object
5
  visibilityStates = computed(() => this.objects().map((obj) => intersect(() => obj)));
6
}