Skip to content

Commit 5af9afb

Browse files
nartcnartc
committed
grid soba docs
1 parent 3878557 commit 5af9afb

File tree

5 files changed

+141
-5
lines changed

5 files changed

+141
-5
lines changed

‎apps/astro-docs/src/components/soba/abstractions/grid.ts

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, input, type Signal } from '@angular/core';
2+
import { NgtArgs } from 'angular-three';
3+
import { NgtsGrid } from 'angular-three-soba/abstractions';
4+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
5+
import { injectGLTF } from 'angular-three-soba/loaders';
6+
import { NgtsAccumulativeShadows, NgtsCenter, NgtsEnvironment, NgtsRandomizedLights } from 'angular-three-soba/staging';
7+
import { Mesh } from 'three';
8+
import type { GLTF } from 'three-stdlib';
9+
10+
type SuzanneGLTF = GLTF & {
11+
nodes: { Suzanne: Mesh };
12+
materials: {};
13+
};
14+
15+
@Component({
16+
selector: 'grid-suzi',
17+
standalone: true,
18+
template: `
19+
@if (gltf(); as gltf) {
20+
<ngt-mesh
21+
[geometry]="gltf.nodes.Suzanne.geometry"
22+
[castShadow]="true"
23+
[receiveShadow]="true"
24+
[rotation]="rotation()"
25+
[scale]="scale()"
26+
>
27+
<ngt-mesh-standard-material color="#9d4b4b" />
28+
</ngt-mesh>
29+
}
30+
`,
31+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
32+
changeDetection: ChangeDetectionStrategy.OnPush,
33+
})
34+
export class Suzi {
35+
gltf = injectGLTF(
36+
() => 'https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/suzanne-high-poly/model.gltf',
37+
) as Signal<SuzanneGLTF | null>;
38+
39+
rotation = input([0, 0, 0]);
40+
scale = input(1);
41+
}
42+
43+
@Component({
44+
selector: 'grid-shadows',
45+
standalone: true,
46+
template: `
47+
<ngts-accumulative-shadows
48+
[options]="{ temporal: true, frames: 100, color: '#9d4b4b', colorBlend: 0.5, alphaTest: 0.75, scale: 20 }"
49+
>
50+
<ngts-randomized-lights [options]="{ amount: 8, radius: 4, position: [5, 5, -10] }" />
51+
</ngts-accumulative-shadows>
52+
`,
53+
imports: [NgtsAccumulativeShadows, NgtsRandomizedLights],
54+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
55+
changeDetection: ChangeDetectionStrategy.OnPush,
56+
})
57+
export class Shadows {}
58+
59+
@Component({
60+
standalone: true,
61+
template: `
62+
<ngt-group [position]="[0, -0.5, 0]">
63+
<ngts-center [options]="{ top: true }">
64+
<grid-suzi [rotation]="[-0.63, 0, 0]" [scale]="2" />
65+
</ngts-center>
66+
67+
<ngts-center [options]="{ top: true, position: [-2, 0, 2] }">
68+
<ngt-mesh [castShadow]="true">
69+
<ngt-sphere-geometry *args="[0.5, 64, 64]" />
70+
<ngt-mesh-standard-material color="#9d4b4b" />
71+
</ngt-mesh>
72+
</ngts-center>
73+
74+
<ngts-center [options]="{ top: true, position: [2.5, 0, 1] }">
75+
<ngt-mesh [castShadow]="true" [rotation]="[0, Math.PI / 4, 0]">
76+
<ngt-box-geometry *args="[0.7, 0.7, 0.7]" />
77+
<ngt-mesh-standard-material color="#9d4b4b" />
78+
</ngt-mesh>
79+
</ngts-center>
80+
81+
<grid-shadows />
82+
83+
<ngts-grid
84+
[options]="{
85+
planeArgs: [10.5, 10.5],
86+
position: [0, -0.01, 0],
87+
cellSize: 0.6,
88+
cellThickness: 1,
89+
cellColor: '#6f6f6f',
90+
sectionSize: 3.3,
91+
sectionThickness: 1.5,
92+
sectionColor: '#9d4b4b',
93+
fadeDistance: 25,
94+
fadeStrength: 1,
95+
followCamera: false,
96+
infiniteGrid: true,
97+
}"
98+
/>
99+
</ngt-group>
100+
<ngts-orbit-controls [options]="{ makeDefault: true }" />
101+
<ngts-environment [options]="{ preset: 'city' }" />
102+
`,
103+
imports: [Suzi, Shadows, NgtsOrbitControls, NgtsEnvironment, NgtsCenter, NgtArgs, NgtsGrid],
104+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
105+
changeDetection: ChangeDetectionStrategy.OnPush,
106+
})
107+
export default class GridScene {
108+
Math = Math;
109+
}
110+
111+
// export const Default = makeStoryFunction(DefaultGridStory, {
112+
// camera: { position: [10, 12, 12], fov: 25 },
113+
// lights: false,
114+
// controls: false,
115+
// background: '#303035',
116+
// });

‎apps/astro-docs/src/components/soba/scenes.ts

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
import type { Type } from '@angular/core';
22
import type { SetupCanvasOptions } from './canvas-options';
33

4-
import GradientTextureScene, { content } from './abstractions/gradient-texture?includeContent';
4+
import GradientTextureScene, {
5+
content as gradientTextureContent,
6+
} from './abstractions/gradient-texture?includeContent';
7+
import GridScene, { content as gridContent } from './abstractions/grid.ts?includeContent';
58

69
export type EntryPoints = 'abstractions';
710
export type EntryPointScene = {
8-
abstractions: 'gradientTexture';
11+
abstractions: 'gradientTexture' | 'grid';
912
};
1013

1114
export type SceneKeys = {
@@ -28,7 +31,17 @@ export const scenes: Scenes = {
2831
abstractions: {
2932
gradientTexture: {
3033
scene: GradientTextureScene,
31-
text: content,
34+
text: gradientTextureContent,
35+
},
36+
grid: {
37+
scene: GridScene,
38+
text: gridContent,
39+
canvasOptions: {
40+
camera: { position: [10, 12, 12], fov: 25 },
41+
lights: false,
42+
controls: false,
43+
background: '#303035',
44+
},
3245
},
3346
},
3447
};

‎apps/astro-docs/src/content/docs/soba/abstractions/gradient-texture.mdx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,4 @@ import Wrapper from '../../../../components/soba/wrapper.astro';
77

88
A declarative `THREE.Texture` which attaches to "map" by default. You can use this to create gradient backgrounds.
99

10-
1110
<Wrapper scene="abstractions.gradientTexture" />

‎apps/astro-docs/src/content/docs/soba/abstractions/grid.mdx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22
title: NgtsGrid
33
description: A directive that renders a grid.
44
---
5+
6+
import Wrapper from '../../../../components/soba/wrapper.astro';
7+
8+
A y-up oriented, shader-based grid implementation.
9+
10+
This component renders a grid using a shader material, allowing for efficient rendering of large grids. It provides options to customize the appearance of the grid, such as cell size, cell thickness, cell color, section size, section thickness, section color, and more.
11+
12+
<Wrapper scene="abstractions.grid" />

‎libs/soba/src/abstractions/grid.stories.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ class Suzi {
4747
standalone: true,
4848
template: `
4949
<ngts-accumulative-shadows
50-
[options]="{ temporal: true, frames: 100, color: '#9d4b4b', colorBlend: 0.5, alphaTest: 0.9, scale: 20 }"
50+
[options]="{ temporal: true, frames: 100, color: '#9d4b4b', colorBlend: 0.5, alphaTest: 0.75, scale: 20 }"
5151
>
5252
<ngts-randomized-lights [options]="{ amount: 8, radius: 4, position: [5, 5, -10] }" />
5353
</ngts-accumulative-shadows>

0 commit comments

Comments
 (0)