Skip to content

Commit a8efd19

Browse files
nartcnartc
committed
docs: new docs
1 parent 87be950 commit a8efd19

File tree

15 files changed

+512
-128
lines changed

15 files changed

+512
-128
lines changed

‎apps/examples/src/app/app.component.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { filter } from 'rxjs';
1414
<option value="cannon">/cannon</option>
1515
<option value="postprocessing">/postprocessing</option>
1616
<option value="rapier">/rapier</option>
17+
<option value="theatre">/theatre</option>
1718
<option value="misc">/misc</option>
1819
<option value="routed">/routed</option>
1920
<option value="routed-rocks">/routed-rocks</option>
@@ -65,7 +66,7 @@ export class AppComponent {
6566
const navigationEnd = this.navigationEnd();
6667
if (!navigationEnd) return '';
6768
const paths = navigationEnd.urlAfterRedirects.split('/').filter(Boolean);
68-
return `https://github.com/angular-threejs/angular-three/tree/main/apps/kitchen-sink/src/app/${paths.join('/')}`;
69+
return `https://github.com/angular-threejs/angular-three/tree/v4-next/apps/examples/src/app/${paths.join('/')}`;
6970
});
7071

7172
protected currentActivatedRouteCredits = computed(() => {

‎apps/examples/src/app/app.routes.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,12 @@ export const appRoutes: Route[] = [
1313
loadChildren: () => import('./postprocessing/postprocessing.routes'),
1414
title: 'Postprocessing - Angular Three Demo',
1515
},
16+
{
17+
path: 'theatre',
18+
loadComponent: () => import('./theatre/theatre'),
19+
loadChildren: () => import('./theatre/theatre.routes'),
20+
title: 'TheatreJS - Angular Three Demo',
21+
},
1622
{
1723
path: 'soba',
1824
loadComponent: () => import('./soba/soba'),

‎apps/examples/src/app/misc/particle-maxime/scene.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import * as THREE from 'three';
1616

1717
import { SimulationMaterial } from './simulation-material';
1818

19-
import { NgtTweakNumber, NgtTweakPane } from 'angular-three-tweakpane';
19+
import { TweakpaneNumber, TweakpanePane } from 'angular-three-tweakpane';
2020
import fragmentShader from './fragment.glsl' with { loader: 'text' };
2121
import vertexShader from './vertex.glsl' with { loader: 'text' };
2222

@@ -158,10 +158,10 @@ export class FBOParticles {
158158
159159
<ngts-orbit-controls [options]="{ enablePan: false, autoRotate: true }" />
160160
161-
<ngt-tweak-pane title="Particles" [top]="48" [expanded]="true">
162-
<ngt-tweak-number [(value)]="frequency" label="frequency" [params]="{ min: 0.25, max: 1, step: 0.01 }" />
163-
<ngt-tweak-number [(value)]="timeScale" label="timeScale" [params]="{ min: 0.5, max: 1.5, step: 0.01 }" />
164-
</ngt-tweak-pane>
161+
<tweakpane-pane title="Particles" [top]="48" [expanded]="true">
162+
<tweakpane-number [(value)]="frequency" label="frequency" [params]="{ min: 0.25, max: 1, step: 0.01 }" />
163+
<tweakpane-number [(value)]="timeScale" label="timeScale" [params]="{ min: 0.5, max: 1.5, step: 0.01 }" />
164+
</tweakpane-pane>
165165
`,
166166
imports: [
167167
NgtsPerspectiveCamera,
@@ -170,8 +170,8 @@ export class FBOParticles {
170170
FBOParticles,
171171
NgtpEffectComposer,
172172
NgtpBloom,
173-
NgtTweakPane,
174-
NgtTweakNumber,
173+
TweakpanePane,
174+
TweakpaneNumber,
175175
],
176176
changeDetection: ChangeDetectionStrategy.OnPush,
177177
schemas: [CUSTOM_ELEMENTS_SCHEMA],

‎apps/examples/src/app/misc/webgpu-tsl/scene.ts‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { extend, injectBeforeRender, injectLoader, injectStore } from 'angular-t
1313
import { NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
1414
import { NgtsOrbitControls } from 'angular-three-soba/controls';
1515
import { injectGLTF } from 'angular-three-soba/loaders';
16-
import { NgtTweakCheckbox, NgtTweakColor, NgtTweakNumber, NgtTweakPane } from 'angular-three-tweakpane';
16+
import { TweakpaneCheckbox, TweakpaneColor, TweakpaneNumber, TweakpanePane } from 'angular-three-tweakpane';
1717
import { GLTF, RGBELoader } from 'three-stdlib';
1818
import * as THREE from 'three/webgpu';
1919
import { DirectionalLight, MeshPhysicalNodeMaterial } from 'three/webgpu';
@@ -96,32 +96,32 @@ interface GearsGLB extends GLTF {
9696
9797
<ngts-orbit-controls [options]="{ zoomSpeed: 0.2 }" />
9898
99-
<ngt-tweak-pane title="Slice Material" left="8px">
100-
<ngt-tweak-checkbox [(value)]="rotate" label="rotate" />
101-
<ngt-tweak-color [(value)]="sliceColor" label="slice color" />
102-
<ngt-tweak-number
99+
<tweakpane-pane title="Slice Material" left="8px">
100+
<tweakpane-checkbox [(value)]="rotate" label="rotate" />
101+
<tweakpane-color [(value)]="sliceColor" label="slice color" />
102+
<tweakpane-number
103103
[(value)]="startAngleDegrees"
104104
label="start angle degrees"
105105
debounce="0"
106106
[params]="{ min: 0, max: 360, step: 1 }"
107107
/>
108-
<ngt-tweak-number
108+
<tweakpane-number
109109
[(value)]="arcAngleDegrees"
110110
label="arc angle degrees"
111111
debounce="0"
112112
[params]="{ min: 0, max: 360, step: 1 }"
113113
/>
114-
</ngt-tweak-pane>
114+
</tweakpane-pane>
115115
`,
116116
imports: [
117117
NgtsPerspectiveCamera,
118118
NgtsOrbitControls,
119119
NgTemplateOutlet,
120120
SliceMaterial,
121-
NgtTweakPane,
122-
NgtTweakColor,
123-
NgtTweakCheckbox,
124-
NgtTweakNumber,
121+
TweakpanePane,
122+
TweakpaneColor,
123+
TweakpaneCheckbox,
124+
TweakpaneNumber,
125125
],
126126
changeDetection: ChangeDetectionStrategy.OnPush,
127127
schemas: [CUSTOM_ELEMENTS_SCHEMA],

‎apps/examples/src/app/rapier/wrapper.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
2-
import { NgtTweakCheckbox, NgtTweakPane } from 'angular-three-tweakpane';
2+
import { TweakpaneCheckbox, TweakpanePane } from 'angular-three-tweakpane';
33
import { NgtCanvas } from 'angular-three/dom';
44
import { RapierWrapperDefault } from './wrapper-default';
55

@@ -8,16 +8,16 @@ import { RapierWrapperDefault } from './wrapper-default';
88
<ngt-canvas shadows [dpr]="1">
99
<ng-template canvasContent>
1010
<app-rapier-wrapper-default [debug]="debug()" [interpolate]="interpolate()" [paused]="paused()" />
11-
<ngt-tweak-pane title="Rapier" [expanded]="true">
12-
<ngt-tweak-checkbox [(value)]="debug" label="debug" />
13-
<ngt-tweak-checkbox [(value)]="interpolate" label="interpolate" />
14-
<ngt-tweak-checkbox [(value)]="paused" label="paused" />
15-
</ngt-tweak-pane>
11+
<tweakpane-pane title="Rapier" [expanded]="true">
12+
<tweakpane-checkbox [(value)]="debug" label="debug" />
13+
<tweakpane-checkbox [(value)]="interpolate" label="interpolate" />
14+
<tweakpane-checkbox [(value)]="paused" label="paused" />
15+
</tweakpane-pane>
1616
</ng-template>
1717
</ngt-canvas>
1818
`,
1919
changeDetection: ChangeDetectionStrategy.OnPush,
20-
imports: [NgtCanvas, RapierWrapperDefault, NgtTweakPane, NgtTweakCheckbox],
20+
imports: [NgtCanvas, RapierWrapperDefault, TweakpanePane, TweakpaneCheckbox],
2121
})
2222
export default class RapierWrapper {
2323
protected debug = signal(true);

‎apps/examples/src/app/soba/baking-soft-shadows/scene.ts‎

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { NgtsOrbitControls } from 'angular-three-soba/controls';
44
import { injectGLTF } from 'angular-three-soba/loaders';
55
import { NgtsAccumulativeShadows, NgtsCenter, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
66
import {
7-
NgtTweakCheckbox,
8-
NgtTweakFolder,
9-
NgtTweakList,
10-
NgtTweakNumber,
11-
NgtTweakPane,
12-
NgtTweakPoint,
7+
TweakpaneCheckbox,
8+
TweakpaneFolder,
9+
TweakpaneList,
10+
TweakpaneNumber,
11+
TweakpanePane,
12+
TweakpanePoint,
1313
} from 'angular-three-tweakpane';
1414
import * as THREE from 'three';
1515
import { FlakesTexture, GLTF } from 'three-stdlib';
@@ -108,12 +108,12 @@ export class Suzi {
108108
<ngts-orbit-controls [options]="{ minPolarAngle: 0, maxPolarAngle: Math.PI / 2 }" />
109109
<ngts-environment [options]="{ preset: 'city', background: background() }" />
110110
111-
<ngt-tweak-pane title="Baking soft shadows controls" left="8px">
112-
<ngt-tweak-folder title="Environment">
113-
<ngt-tweak-checkbox [(value)]="background" label="Background" />
114-
</ngt-tweak-folder>
115-
<ngt-tweak-folder title="Shadows">
116-
<ngt-tweak-number
111+
<tweakpane-pane title="Baking soft shadows controls" left="8px">
112+
<tweakpane-folder title="Environment">
113+
<tweakpane-checkbox [(value)]="background" label="Background" />
114+
</tweakpane-folder>
115+
<tweakpane-folder title="Shadows">
116+
<tweakpane-number
117117
[(value)]="shadows.frame"
118118
label="Frames"
119119
[params]="{
@@ -123,42 +123,42 @@ export class Suzi {
123123
],
124124
}"
125125
/>
126-
<ngt-tweak-number
126+
<tweakpane-number
127127
[(value)]="shadows.alphaTest"
128128
label="alphaTest"
129129
[params]="{ min: 0, max: 1, step: 0.01 }"
130130
/>
131-
<ngt-tweak-list [(value)]="shadows.color" [options]="['#FFA500', '#97B2C2', '#E8888E']" label="Color" />
132-
<ngt-tweak-number
131+
<tweakpane-list [(value)]="shadows.color" [options]="['#FFA500', '#97B2C2', '#E8888E']" label="Color" />
132+
<tweakpane-number
133133
[(value)]="shadows.colorBlend"
134134
[params]="{ min: 0, max: 5, step: 0.1 }"
135135
label="Color Blend"
136136
/>
137-
<ngt-tweak-checkbox [(value)]="shadows.toneMapped" label="toneMapped" />
138-
<ngt-tweak-number
137+
<tweakpane-checkbox [(value)]="shadows.toneMapped" label="toneMapped" />
138+
<tweakpane-number
139139
[(value)]="shadows.opacity"
140140
label="opacity"
141141
[params]="{ min: 0, max: 4, step: 0.05 }"
142142
/>
143-
<ngt-tweak-number [(value)]="shadows.scale" label="scale" [params]="{ min: 0, max: 20, step: 0.1 }" />
144-
</ngt-tweak-folder>
145-
<ngt-tweak-folder title="Shadows Lights">
146-
<ngt-tweak-number
143+
<tweakpane-number [(value)]="shadows.scale" label="scale" [params]="{ min: 0, max: 20, step: 0.1 }" />
144+
</tweakpane-folder>
145+
<tweakpane-folder title="Shadows Lights">
146+
<tweakpane-number
147147
[(value)]="lights.intensity"
148148
label="intensity"
149149
[params]="{ min: 0, max: 10, step: 0.1 }"
150150
/>
151-
<ngt-tweak-number [(value)]="lights.amount" label="amount" [params]="{ min: 0, max: 10, step: 0.1 }" />
152-
<ngt-tweak-number [(value)]="lights.radius" label="radius" [params]="{ min: 0, max: 10, step: 0.1 }" />
153-
<ngt-tweak-number
151+
<tweakpane-number [(value)]="lights.amount" label="amount" [params]="{ min: 0, max: 10, step: 0.1 }" />
152+
<tweakpane-number [(value)]="lights.radius" label="radius" [params]="{ min: 0, max: 10, step: 0.1 }" />
153+
<tweakpane-number
154154
[(value)]="lights.ambient"
155155
label="ambient"
156156
[params]="{ min: 0, max: 1, step: 0.01 }"
157157
/>
158-
<ngt-tweak-number [(value)]="lights.bias" label="bias" [params]="{ min: 0, max: 1, step: 0.01 }" />
159-
<ngt-tweak-point [(value)]="lights.position" label="position" />
160-
</ngt-tweak-folder>
161-
</ngt-tweak-pane>
158+
<tweakpane-number [(value)]="lights.bias" label="bias" [params]="{ min: 0, max: 1, step: 0.01 }" />
159+
<tweakpane-point [(value)]="lights.position" label="position" />
160+
</tweakpane-folder>
161+
</tweakpane-pane>
162162
`,
163163

164164
schemas: [CUSTOM_ELEMENTS_SCHEMA],
@@ -171,12 +171,12 @@ export class Suzi {
171171
NgtsCenter,
172172
NgtArgs,
173173
Suzi,
174-
NgtTweakPane,
175-
NgtTweakFolder,
176-
NgtTweakCheckbox,
177-
NgtTweakList,
178-
NgtTweakNumber,
179-
NgtTweakPoint,
174+
TweakpanePane,
175+
TweakpaneFolder,
176+
TweakpaneCheckbox,
177+
TweakpaneList,
178+
TweakpaneNumber,
179+
TweakpanePoint,
180180
],
181181
})
182182
export class SceneGraph {

‎apps/examples/src/app/soba/basic/scene.ts‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -19,12 +19,12 @@ import { injectGLTF } from 'angular-three-soba/loaders';
1919
import { NgtsAnimation, injectAnimations } from 'angular-three-soba/misc';
2020
import { injectMatcapTexture } from 'angular-three-soba/staging';
2121
import {
22-
NgtTweakCheckbox,
23-
NgtTweakColor,
24-
NgtTweakFolder,
25-
NgtTweakList,
26-
NgtTweakNumber,
27-
NgtTweakPane,
22+
TweakpaneCheckbox,
23+
TweakpaneColor,
24+
TweakpaneFolder,
25+
TweakpaneList,
26+
TweakpaneNumber,
27+
TweakpanePane,
2828
} from 'angular-three-tweakpane';
2929
import { Bone, Group, MeshStandardMaterial, Object3D, SRGBColorSpace, SkinnedMesh } from 'three';
3030
import { GLTF } from 'three-stdlib';
@@ -140,32 +140,32 @@ export class Bot {
140140
141141
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true }" />
142142
143-
<ngt-tweak-pane title="Soba Basic">
144-
<ngt-tweak-folder title="Bloom">
145-
<ngt-tweak-checkbox [(value)]="bloom" label="Enabled" />
146-
<ngt-tweak-number
143+
<tweakpane-pane title="Soba Basic">
144+
<tweakpane-folder title="Bloom">
145+
<tweakpane-checkbox [(value)]="bloom" label="Enabled" />
146+
<tweakpane-number
147147
[(value)]="luminanceThreshold"
148148
label="luminanceThreshold"
149149
[params]="{ min: 0, max: 1, step: 0.01 }"
150150
/>
151-
<ngt-tweak-number
151+
<tweakpane-number
152152
[(value)]="luminanceSmoothing"
153153
label="luminanceSmoothing"
154154
[params]="{ min: 0, max: 1, step: 0.01 }"
155155
/>
156-
<ngt-tweak-number
156+
<tweakpane-number
157157
[(value)]="intensity"
158158
label="bloomIntensity"
159159
[params]="{ min: 0, max: 10, step: 0.5 }"
160160
/>
161-
</ngt-tweak-folder>
162-
<ngt-tweak-folder title="Glitch">
163-
<ngt-tweak-checkbox [(value)]="glitch" label="Enabled" />
164-
</ngt-tweak-folder>
165-
166-
<ngt-tweak-list [(value)]="selectedAction" [options]="['Strut', 'Dance', 'Idle']" label="Animation" />
167-
<ngt-tweak-color [(value)]="backgroundColor" label="Background" />
168-
</ngt-tweak-pane>
161+
</tweakpane-folder>
162+
<tweakpane-folder title="Glitch">
163+
<tweakpane-checkbox [(value)]="glitch" label="Enabled" />
164+
</tweakpane-folder>
165+
166+
<tweakpane-list [(value)]="selectedAction" [options]="['Strut', 'Dance', 'Idle']" label="Animation" />
167+
<tweakpane-color [(value)]="backgroundColor" label="Background" />
168+
</tweakpane-pane>
169169
}
170170
`,
171171
imports: [
@@ -175,12 +175,12 @@ export class Bot {
175175
NgtpEffectComposer,
176176
NgtpBloom,
177177
NgtpGlitch,
178-
NgtTweakPane,
179-
NgtTweakFolder,
180-
NgtTweakCheckbox,
181-
NgtTweakList,
182-
NgtTweakColor,
183-
NgtTweakNumber,
178+
TweakpanePane,
179+
TweakpaneFolder,
180+
TweakpaneCheckbox,
181+
TweakpaneList,
182+
TweakpaneColor,
183+
TweakpaneNumber,
184184
],
185185
changeDetection: ChangeDetectionStrategy.OnPush,
186186
schemas: [CUSTOM_ELEMENTS_SCHEMA],

‎apps/examples/src/app/soba/bruno-simons-20k/bruno-simons-20k.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ChangeDetectionStrategy, Component } from '@angular/core';
2-
import { NgtTweakCheckbox, NgtTweakPane } from 'angular-three-tweakpane';
2+
import { TweakpaneCheckbox, TweakpanePane } from 'angular-three-tweakpane';
33
import { NgtCanvas } from 'angular-three/dom';
44
import { debug, SceneGraph, withN8ao } from './scene';
55

@@ -14,14 +14,14 @@ import { debug, SceneGraph, withN8ao } from './scene';
1414
<app-bruno-scene-graph *canvasContent />
1515
</ngt-canvas>
1616
17-
<ngt-tweak-pane title="Bruno Simons 20k">
18-
<ngt-tweak-checkbox [(value)]="debug" label="debug" />
19-
<ngt-tweak-checkbox [(value)]="withN8ao" label="withN8ao" />
20-
</ngt-tweak-pane>
17+
<tweakpane-pane title="Bruno Simons 20k">
18+
<tweakpane-checkbox [(value)]="debug" label="debug" />
19+
<tweakpane-checkbox [(value)]="withN8ao" label="withN8ao" />
20+
</tweakpane-pane>
2121
`,
2222
changeDetection: ChangeDetectionStrategy.OnPush,
2323
host: { class: 'bruno-simons-2k-soba' },
24-
imports: [NgtCanvas, SceneGraph, NgtTweakPane, NgtTweakCheckbox],
24+
imports: [NgtCanvas, SceneGraph, TweakpanePane, TweakpaneCheckbox],
2525
})
2626
export default class BrunoSimons20k {
2727
protected debug = debug;

0 commit comments

Comments
 (0)