angular-three-tweakpane 4.0.0-next.115 → 4.0.0-next.118
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +143 -0
- package/fesm2022/angular-three-tweakpane.mjs +1168 -62
- package/fesm2022/angular-three-tweakpane.mjs.map +1 -1
- package/package.json +3 -3
- package/types/angular-three-tweakpane.d.ts +975 -0
- package/index.d.ts +0 -189
package/README.md
CHANGED
|
@@ -1 +1,144 @@
|
|
|
1
1
|
# `angular-three-tweakpane`
|
|
2
|
+
|
|
3
|
+
This library provides [Tweakpane](https://tweakpane.github.io/docs/) integration for Angular Three, enabling easy creation of debug UI controls for tweaking parameters in your 3D scenes.
|
|
4
|
+
|
|
5
|
+
## Documentation
|
|
6
|
+
|
|
7
|
+
All public APIs are documented with JSDoc comments. Your IDE will provide inline documentation, parameter hints, and examples as you code.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npm install angular-three-tweakpane tweakpane
|
|
13
|
+
# yarn add angular-three-tweakpane tweakpane
|
|
14
|
+
# pnpm add angular-three-tweakpane tweakpane
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
> Make sure to already have `angular-three` installed
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Declarative API with `tweaks()`
|
|
22
|
+
|
|
23
|
+
The recommended way to create controls:
|
|
24
|
+
|
|
25
|
+
```typescript
|
|
26
|
+
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
27
|
+
import { tweaks, TweakpaneAnchor } from 'angular-three-tweakpane';
|
|
28
|
+
|
|
29
|
+
@Component({
|
|
30
|
+
template: `
|
|
31
|
+
<tweakpane-anchor />
|
|
32
|
+
<ngt-mesh [position]="[params.x(), params.y(), params.z()]">
|
|
33
|
+
<ngt-box-geometry />
|
|
34
|
+
<ngt-mesh-standard-material [color]="params.color()" />
|
|
35
|
+
</ngt-mesh>
|
|
36
|
+
`,
|
|
37
|
+
imports: [TweakpaneAnchor],
|
|
38
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
39
|
+
})
|
|
40
|
+
export class SceneGraph {
|
|
41
|
+
params = tweaks({
|
|
42
|
+
x: { value: 0, min: -5, max: 5 },
|
|
43
|
+
y: { value: 0, min: -5, max: 5 },
|
|
44
|
+
z: { value: 0, min: -5, max: 5 },
|
|
45
|
+
color: { value: '#ff0000', color: true },
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
### Nested Folders
|
|
51
|
+
|
|
52
|
+
```typescript
|
|
53
|
+
params = tweaks({
|
|
54
|
+
position: tweaks.folder({
|
|
55
|
+
x: { value: 0, min: -5, max: 5 },
|
|
56
|
+
y: { value: 0, min: -5, max: 5 },
|
|
57
|
+
z: { value: 0, min: -5, max: 5 },
|
|
58
|
+
}),
|
|
59
|
+
material: tweaks.folder({
|
|
60
|
+
color: { value: '#ff0000', color: true },
|
|
61
|
+
metalness: { value: 0.5, min: 0, max: 1 },
|
|
62
|
+
roughness: { value: 0.5, min: 0, max: 1 },
|
|
63
|
+
}),
|
|
64
|
+
});
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Component-Based API
|
|
68
|
+
|
|
69
|
+
For more control, use individual components:
|
|
70
|
+
|
|
71
|
+
```typescript
|
|
72
|
+
import {
|
|
73
|
+
TweakpanePane,
|
|
74
|
+
TweakpaneFolder,
|
|
75
|
+
TweakpaneNumber,
|
|
76
|
+
TweakpaneColor,
|
|
77
|
+
TweakpaneCheckbox,
|
|
78
|
+
TweakpaneButton,
|
|
79
|
+
} from 'angular-three-tweakpane';
|
|
80
|
+
|
|
81
|
+
@Component({
|
|
82
|
+
template: `
|
|
83
|
+
<tweakpane-pane [options]="{ title: 'Controls' }">
|
|
84
|
+
<tweakpane-folder [options]="{ title: 'Position' }">
|
|
85
|
+
<tweakpane-number [(value)]="x" [options]="{ label: 'X', min: -5, max: 5 }" />
|
|
86
|
+
</tweakpane-folder>
|
|
87
|
+
<tweakpane-color [(value)]="color" [options]="{ label: 'Color' }" />
|
|
88
|
+
<tweakpane-checkbox [(value)]="visible" [options]="{ label: 'Visible' }" />
|
|
89
|
+
<tweakpane-button [options]="{ title: 'Reset' }" (click)="reset()" />
|
|
90
|
+
</tweakpane-pane>
|
|
91
|
+
`,
|
|
92
|
+
imports: [TweakpanePane, TweakpaneFolder, TweakpaneNumber, TweakpaneColor, TweakpaneCheckbox, TweakpaneButton],
|
|
93
|
+
})
|
|
94
|
+
export class Controls {
|
|
95
|
+
x = signal(0);
|
|
96
|
+
color = signal('#ff0000');
|
|
97
|
+
visible = signal(true);
|
|
98
|
+
|
|
99
|
+
reset() {
|
|
100
|
+
this.x.set(0);
|
|
101
|
+
this.color.set('#ff0000');
|
|
102
|
+
this.visible.set(true);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
## Control Types
|
|
108
|
+
|
|
109
|
+
| Component | Description | Config Type |
|
|
110
|
+
| ------------------- | ---------------------------------- | ----------------------- |
|
|
111
|
+
| `TweakpaneNumber` | Numeric input with optional slider | `{ min?, max?, step? }` |
|
|
112
|
+
| `TweakpaneText` | Text input | `{ label? }` |
|
|
113
|
+
| `TweakpaneCheckbox` | Boolean toggle | `{ label? }` |
|
|
114
|
+
| `TweakpaneColor` | Color picker | `{ color: true }` |
|
|
115
|
+
| `TweakpaneList` | Dropdown select | `{ options: [...] }` |
|
|
116
|
+
| `TweakpanePoint` | 2D/3D/4D point input | `{ x?, y?, z?, w? }` |
|
|
117
|
+
| `TweakpaneButton` | Clickable button | `{ title }` |
|
|
118
|
+
| `TweakpaneFolder` | Collapsible group | `{ title, expanded? }` |
|
|
119
|
+
|
|
120
|
+
## Pane Positioning
|
|
121
|
+
|
|
122
|
+
```typescript
|
|
123
|
+
<tweakpane-pane [options]="{
|
|
124
|
+
title: 'Debug',
|
|
125
|
+
position: 'top-right' // 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
|
|
126
|
+
}">
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Binding to Objects
|
|
130
|
+
|
|
131
|
+
Use `TweakpaneBinding` to bind directly to object properties:
|
|
132
|
+
|
|
133
|
+
```typescript
|
|
134
|
+
@Component({
|
|
135
|
+
template: `
|
|
136
|
+
<tweakpane-pane>
|
|
137
|
+
<tweakpane-binding [target]="mesh.position" property="x" [options]="{ min: -5, max: 5 }" />
|
|
138
|
+
</tweakpane-pane>
|
|
139
|
+
`,
|
|
140
|
+
})
|
|
141
|
+
export class Controls {
|
|
142
|
+
mesh = viewChild.required<ElementRef<Mesh>>('mesh');
|
|
143
|
+
}
|
|
144
|
+
```
|