Skip to content

Commit 4c7292d

Browse files
nartcnartc
committed
wip
1 parent 169a5d1 commit 4c7292d

File tree

6 files changed

+200
-5
lines changed

6 files changed

+200
-5
lines changed

‎apps/docs/src/components/scenes/rapier-demo/rapier-demo.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
import { NgtCanvas, NgtCanvasContent, provideNgtRenderer } from 'angular-three/dom';
3+
import { SceneGraph } from '../hud/scene-graph';
4+
5+
@Component({
6+
selector: 'rapier-demo',
7+
template: `
8+
<ngt-canvas [camera]="{ position: [-1, 5, 5], fov: 45 }" shadows>
9+
<app-scene-graph *canvasContent />
10+
</ngt-canvas>
11+
`,
12+
imports: [NgtCanvas, NgtCanvasContent, SceneGraph],
13+
changeDetection: ChangeDetectionStrategy.OnPush,
14+
})
15+
export default class RapierDemo {
16+
static clientProviders = [provideNgtRenderer()];
17+
}

‎apps/docs/src/components/scenes/rapier-demo/scene-graph.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
2+
import { extend, NgtArgs, type NgtVector3 } from 'angular-three';
3+
import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
4+
import * as THREE from 'three';
5+
6+
@Component({
7+
selector: 'app-floor',
8+
template: `
9+
<ngt-object3D rigidBody="fixed" [options]="{ colliders: false }" [position]="[0, -1, 0]">
10+
<ngt-object3D cuboidCollider [args]="[1000, 1, 1000]" />
11+
</ngt-object3D>
12+
`,
13+
imports: [NgtrRigidBody, NgtrCuboidCollider],
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
16+
})
17+
export class Floor {}
18+
19+
@Component({
20+
selector: 'app-box',
21+
template: `
22+
<ngt-object3D rigidBody [position]="position()">
23+
<ngt-mesh castShadow receiveShadow>
24+
<ngt-box-geometry />
25+
<ngt-mesh-standard-material color="hotpink" />
26+
</ngt-mesh>
27+
</ngt-object3D>
28+
`,
29+
imports: [NgtrRigidBody],
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
32+
})
33+
export class Box {
34+
position = input<NgtVector3>([0, 5, 0]);
35+
}
36+
37+
@Component({
38+
selector: 'app-scene-graph',
39+
template: `
40+
<ngt-color attach="background" *args="['lightblue']" />
41+
<ngt-ambient-light />
42+
<ngt-directional-light [position]="10" castShadow>
43+
<ngt-vector2 *args="[2048, 2048]" attach="shadow.mapSize" />
44+
</ngt-directional-light>
45+
46+
<ngtr-physics>
47+
<ng-template>
48+
<app-floor />
49+
@for (position of positions; track $index) {
50+
<app-box [position]="position" />
51+
}
52+
</ng-template>
53+
</ngtr-physics>
54+
`,
55+
imports: [NgtArgs, NgtrPhysics, Floor, Box],
56+
changeDetection: ChangeDetectionStrategy.OnPush,
57+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
58+
})
59+
export class SceneGraph {
60+
positions: NgtVector3[] = [
61+
[0.1, 5, 0],
62+
[0, 10, -1],
63+
[0, 20, -2],
64+
];
65+
66+
constructor() {
67+
extend(THREE);
68+
}
69+
}

‎apps/docs/src/components/ui/floating-code-block.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const rendered = await Promise.all(
4141
);
4242
---
4343

44-
<div class:list={["p-4 rounded border border-dashed border-accent-600 dark:border-accent-200 shadow-2xl h-fit", className]}>
44+
<div class:list={["p-4 rounded border border-dashed border-accent-600 dark:border-accent-200 shadow-2xl h-fit overflow-y-auto", className]}>
4545
<Tabs>
4646
{rendered.map(({Content, tabTitle}) => (
4747
<TabItem label={tabTitle || ''}>

‎apps/docs/src/content/docs/index.mdx

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
2626
<div class="h-full w-full grid grid-cols-8 gap-4">
2727
<div class="col-span-3">
2828
<h1>
29-
Declarative <span class="text-accent-600 dark:text-accent-200">scene graphs</span>
29+
<span class="text-accent-600 dark:text-accent-200">Declarative</span> scene graphs
3030
</h1>
3131
<p>
32-
Angular Three allows the users to use every feature of THREE.js in a declarative way via Angular{' '}
32+
Angular Three allows users to use every feature of THREE.js in a declarative way via Angular{' '}
3333
<strong>template syntax</strong>. Scale your 3D experiences with ease by leveraging Angular's batteries-included
3434
APIs like <strong>Signal</strong>, and more
3535
</p>
@@ -38,7 +38,7 @@ import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
3838
</div>
3939
</div>
4040
<FloatingCodeBlock
41-
class="col-span-5"
41+
class="col-span-5 max-h-[800px]"
4242
snippets={[
4343
{ title: 'scene-graph.ts', name: 'simple-scene' },
4444
{ title: 'canvas.ts', name: 'simple-scene-canvas' },
@@ -48,5 +48,24 @@ import SimpleScene from '../../components/scenes/simple-scene/simple-scene';
4848
</section>
4949

5050
<section class="min-h-screen w-full flex justify-center items-center">
51-
<div class="h-full w-full grid grid-cols-8 gap-4"></div>
51+
<div class="h-full w-full grid grid-cols-8 gap-4">
52+
<FloatingCodeBlock
53+
class="col-span-5 max-h-[800px]"
54+
snippets={[
55+
{ title: 'scene-graph.ts', name: 'rapier-demo-scene-graph' },
56+
{ title: 'canvas.ts', name: 'rapier-demo' },
57+
]}
58+
/>
59+
<div class="col-span-3">
60+
<h1>
61+
Powerful <span class="text-accent-600 dark:text-accent-200">utilities</span>
62+
</h1>
63+
<p>
64+
Angular Three comes with integrations for physics engines like <strong>Rapier</strong> and{' '}
65+
<strong>Cannon</strong>; as well as postprocessing library like <strong>Postprocessing</strong>. On top of that,{' '}
66+
<code>angular-three-soba</code> provides a collection of utilities to help you focus on building your ideas.
67+
</p>
68+
69+
</div>
70+
</div>
5271
</section>

‎apps/docs/src/content/snippets/rapier-demo-scene-graph.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
```angular-ts
2+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input } from '@angular/core';
3+
import { extend, NgtArgs, type NgtVector3 } from 'angular-three';
4+
import { NgtrCuboidCollider, NgtrPhysics, NgtrRigidBody } from 'angular-three-rapier';
5+
import * as THREE from 'three';
6+
7+
@Component({
8+
selector: 'app-floor',
9+
template: `
10+
<ngt-object3D rigidBody="fixed" [options]="{ colliders: false }" [position]="[0, -1, 0]">
11+
<ngt-object3D cuboidCollider [args]="[1000, 1, 1000]" />
12+
</ngt-object3D>
13+
`,
14+
imports: [NgtrRigidBody, NgtrCuboidCollider],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
17+
})
18+
export class Floor {}
19+
20+
@Component({
21+
selector: 'app-box',
22+
template: `
23+
<ngt-object3D rigidBody [position]="position()">
24+
<ngt-mesh castShadow receiveShadow>
25+
<ngt-box-geometry />
26+
<ngt-mesh-standard-material color="hotpink" />
27+
</ngt-mesh>
28+
</ngt-object3D>
29+
`,
30+
imports: [NgtrRigidBody],
31+
changeDetection: ChangeDetectionStrategy.OnPush,
32+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
33+
})
34+
export class Box {
35+
position = input<NgtVector3>([0, 5, 0]);
36+
}
37+
38+
@Component({
39+
selector: 'app-scene-graph',
40+
template: `
41+
<ngt-color attach="background" *args="['lightblue']" />
42+
<ngt-ambient-light />
43+
<ngt-directional-light [position]="10" castShadow>
44+
<ngt-vector2 *args="[2048, 2048]" attach="shadow.mapSize" />
45+
</ngt-directional-light>
46+
47+
<ngtr-physics>
48+
<ng-template>
49+
<app-floor />
50+
@for (position of positions; track $index) {
51+
<app-box [position]="position" />
52+
}
53+
</ng-template>
54+
</ngtr-physics>
55+
`,
56+
imports: [NgtArgs, NgtrPhysics, Floor, Box],
57+
changeDetection: ChangeDetectionStrategy.OnPush,
58+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
59+
})
60+
export class SceneGraph {
61+
positions: NgtVector3[] = [
62+
[0.1, 5, 0],
63+
[0, 10, -1],
64+
[0, 20, -2],
65+
];
66+
67+
constructor() {
68+
extend(THREE);
69+
}
70+
}
71+
```

‎apps/docs/src/content/snippets/rapier-demo.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
```angular-ts
2+
import { ChangeDetectionStrategy, Component } from '@angular/core';
3+
import { NgtCanvas, NgtCanvasContent, provideNgtRenderer } from 'angular-three/dom';
4+
import { SceneGraph } from '../hud/scene-graph';
5+
6+
@Component({
7+
selector: 'rapier-demo',
8+
template: `
9+
<ngt-canvas [camera]="{ position: [-1, 5, 5], fov: 45 }" shadows>
10+
<app-scene-graph *canvasContent />
11+
</ngt-canvas>
12+
`,
13+
imports: [NgtCanvas, NgtCanvasContent, SceneGraph],
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
})
16+
export default class RapierDemo {
17+
static clientProviders = [provideNgtRenderer()];
18+
}
19+
```

0 commit comments

Comments
 (0)