angular-three-theatre 4.0.0-next.116 → 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
CHANGED
|
@@ -1 +1,135 @@
|
|
|
1
1
|
# `angular-three-theatre`
|
|
2
|
+
|
|
3
|
+
This library provides [Theatre.js](https://www.theatrejs.com/) integration for Angular Three, enabling powerful animation and motion design capabilities for 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-theatre @theatre/core @theatre/studio
|
|
13
|
+
# yarn add angular-three-theatre @theatre/core @theatre/studio
|
|
14
|
+
# pnpm add angular-three-theatre @theatre/core @theatre/studio
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
> Make sure to already have `angular-three` installed
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### Basic Setup
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import { Component } from '@angular/core';
|
|
25
|
+
import { TheatreProject, TheatreSheet, TheatreSheetObject } from 'angular-three-theatre';
|
|
26
|
+
|
|
27
|
+
@Component({
|
|
28
|
+
template: `
|
|
29
|
+
<theatre-project name="My Project">
|
|
30
|
+
<ng-template theatreSheet="Scene">
|
|
31
|
+
<ngt-mesh *theatreSheetObject="'Box'; let values" [position]="[values.x, values.y, values.z]">
|
|
32
|
+
<ngt-box-geometry />
|
|
33
|
+
<ngt-mesh-standard-material />
|
|
34
|
+
</ngt-mesh>
|
|
35
|
+
</ng-template>
|
|
36
|
+
</theatre-project>
|
|
37
|
+
`,
|
|
38
|
+
imports: [TheatreProject, TheatreSheet, TheatreSheetObject],
|
|
39
|
+
})
|
|
40
|
+
export class SceneGraph {}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Enable Studio (Development)
|
|
44
|
+
|
|
45
|
+
```typescript
|
|
46
|
+
import { TheatreStudio } from 'angular-three-theatre';
|
|
47
|
+
|
|
48
|
+
@Component({
|
|
49
|
+
template: `
|
|
50
|
+
<theatre-studio [enabled]="true" />
|
|
51
|
+
<theatre-project name="My Project">
|
|
52
|
+
<!-- ... -->
|
|
53
|
+
</theatre-project>
|
|
54
|
+
`,
|
|
55
|
+
imports: [TheatreStudio, TheatreProject],
|
|
56
|
+
})
|
|
57
|
+
export class App {}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Sequence Playback
|
|
61
|
+
|
|
62
|
+
```typescript
|
|
63
|
+
import { TheatreSequence } from 'angular-three-theatre';
|
|
64
|
+
|
|
65
|
+
@Component({
|
|
66
|
+
template: `
|
|
67
|
+
<theatre-project name="My Project">
|
|
68
|
+
<ng-template theatreSheet="Scene">
|
|
69
|
+
<theatre-sequence [options]="{ autoplay: true, loop: true }" [length]="5" />
|
|
70
|
+
<!-- animated objects -->
|
|
71
|
+
</ng-template>
|
|
72
|
+
</theatre-project>
|
|
73
|
+
`,
|
|
74
|
+
imports: [TheatreProject, TheatreSheet, TheatreSequence],
|
|
75
|
+
})
|
|
76
|
+
export class SceneGraph {}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### Sync Three.js Properties
|
|
80
|
+
|
|
81
|
+
```typescript
|
|
82
|
+
import { TheatreSheetObjectSync } from 'angular-three-theatre';
|
|
83
|
+
|
|
84
|
+
@Component({
|
|
85
|
+
template: `
|
|
86
|
+
<ngt-mesh #mesh>
|
|
87
|
+
<theatre-sheet-object-sync [parent]="mesh" [props]="['position', 'rotation', 'scale']" />
|
|
88
|
+
<ngt-box-geometry />
|
|
89
|
+
</ngt-mesh>
|
|
90
|
+
`,
|
|
91
|
+
imports: [TheatreSheetObjectSync],
|
|
92
|
+
})
|
|
93
|
+
export class AnimatedMesh {}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### Transform Controls
|
|
97
|
+
|
|
98
|
+
```typescript
|
|
99
|
+
import { TheatreSheetObjectTransform } from 'angular-three-theatre';
|
|
100
|
+
|
|
101
|
+
@Component({
|
|
102
|
+
template: `
|
|
103
|
+
<theatre-sheet-object-transform label="My Object">
|
|
104
|
+
<ngt-mesh>
|
|
105
|
+
<ngt-box-geometry />
|
|
106
|
+
</ngt-mesh>
|
|
107
|
+
</theatre-sheet-object-transform>
|
|
108
|
+
`,
|
|
109
|
+
imports: [TheatreSheetObjectTransform],
|
|
110
|
+
})
|
|
111
|
+
export class TransformableObject {}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Components
|
|
115
|
+
|
|
116
|
+
| Component | Description |
|
|
117
|
+
| ----------------------------- | ------------------------------------- |
|
|
118
|
+
| `TheatreProject` | Root container for Theatre.js project |
|
|
119
|
+
| `TheatreSheet` | Creates an animation sheet |
|
|
120
|
+
| `TheatreSequence` | Controls sequence playback |
|
|
121
|
+
| `TheatreStudio` | Enables Theatre.js Studio UI |
|
|
122
|
+
| `TheatreSheetObject` | Creates animatable properties |
|
|
123
|
+
| `TheatreSheetObjectSync` | Syncs Three.js object properties |
|
|
124
|
+
| `TheatreSheetObjectTransform` | Adds transform controls |
|
|
125
|
+
|
|
126
|
+
## Transformers
|
|
127
|
+
|
|
128
|
+
Built-in property transformers for Theatre.js props:
|
|
129
|
+
|
|
130
|
+
- `color` - RGBA color picker
|
|
131
|
+
- `degrees` - Radian to degrees conversion
|
|
132
|
+
- `euler` - Euler rotation controls
|
|
133
|
+
- `normalized` - 0-1 range slider
|
|
134
|
+
- `side` - Material side property
|
|
135
|
+
- `generic` - Fallback for common types
|