Angular Bridge (@3lens/angular-bridge)
The Angular bridge provides full integration between 3Lens devtools and Angular applications, with RxJS-based reactive state management and support for Nx workspaces.
Installation
bash
npm install @3lens/angular-bridge @3lens/core
# or
pnpm add @3lens/angular-bridge @3lens/core
# or
yarn add @3lens/angular-bridge @3lens/core
# or
bun add @3lens/angular-bridge @3lens/core1
2
3
4
5
6
7
2
3
4
5
6
7
Quick Start
NgModule Setup
typescript
import { NgModule } from '@angular/core';
import { ThreeLensModule } from '@3lens/angular-bridge';
@NgModule({
imports: [
ThreeLensModule.forRoot({
appName: 'My Angular App',
showOverlay: true,
})
]
})
export class AppModule {}1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
Standalone Setup
typescript
import { bootstrapApplication } from '@angular/platform-browser';
import { provideThreeLens } from '@3lens/angular-bridge';
bootstrapApplication(AppComponent, {
providers: [
provideThreeLens({ appName: 'My App' })
]
});1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
API Reference
Tokens
| Export | Description |
|---|---|
| THREELENS_PROBE | Injection token for the probe instance |
| THREELENS_CONFIG | Injection token for configuration |
Service
| Export | Description |
|---|---|
| ThreeLensService | Main service with RxJS observables |
Directives
| Export | Description |
|---|---|
| ThreeLensEntityDirective | Directive for entity registration |
Module
| Export | Description |
|---|---|
| ThreeLensModule | Angular module with forRoot/forChild |
| provideThreeLens | Standalone providers function |
Nx Helpers
| Export | Description |
|---|---|
| NxLibraryHelper | Helper for Nx workspace integration |
| createNxLibraryHelper | Factory function |
| NxThreeLensLibrary | Decorator for Nx libraries |
Types
| Type | Description |
|---|---|
ThreeLensModuleConfig | Module configuration interface |
EntityOptions | Entity registration options |
NxLibraryOptions | Nx library options |
Usage Patterns
Basic Scene Setup
typescript
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
import { ThreeLensService } from '@3lens/angular-bridge';
import * as THREE from 'three';
@Component({
selector: 'app-scene',
template: `<canvas #canvas></canvas>`
})
export class SceneComponent implements OnInit {
@ViewChild('canvas') canvasRef!: ElementRef<HTMLCanvasElement>;
private renderer!: THREE.WebGLRenderer;
private scene!: THREE.Scene;
constructor(private threeLens: ThreeLensService) {}
ngOnInit() {
this.renderer = new THREE.WebGLRenderer({
canvas: this.canvasRef.nativeElement
});
this.scene = new THREE.Scene();
// Connect to 3Lens
this.threeLens.observeRenderer(this.renderer);
this.threeLens.observeScene(this.scene);
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Reactive Stats Display
typescript
import { Component } from '@angular/core';
import { ThreeLensService } from '@3lens/angular-bridge';
import { AsyncPipe } from '@angular/common';
@Component({
selector: 'app-stats',
standalone: true,
imports: [AsyncPipe],
template: `
<div class="stats">
<span>FPS: {{ fps$ | async | number:'1.0-0' }}</span>
<span>Draw Calls: {{ drawCalls$ | async }}</span>
<span>Triangles: {{ triangles$ | async | number }}</span>
</div>
`
})
export class StatsComponent {
fps$ = this.threeLens.fps$;
drawCalls$ = this.threeLens.drawCalls$;
triangles$ = this.threeLens.triangles$;
constructor(private threeLens: ThreeLensService) {}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Entity Registration
typescript
import { Component, AfterViewInit } from '@angular/core';
import { ThreeLensService } from '@3lens/angular-bridge';
@Component({
selector: 'app-player',
template: `<ng-content></ng-content>`
})
export class PlayerComponent implements AfterViewInit {
private playerMesh!: THREE.Mesh;
constructor(private threeLens: ThreeLensService) {}
ngAfterViewInit() {
this.threeLens.registerEntity(this.playerMesh, {
name: 'Player',
module: 'game/entities',
metadata: { health: 100 },
tags: ['player', 'controllable']
});
}
ngOnDestroy() {
this.threeLens.unregisterEntity(this.playerMesh);
}
}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25