Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c3ac52d

Browse files
nartcnartc
committed
first scene docs
1 parent d28240b commit c3ac52d

23 files changed

+1284
-149
lines changed

‎apps/astro-docs/astro.config.mjs

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,41 +7,61 @@ import { defineConfig } from 'astro/config';
77
// https://astro.build/config
88
export default defineConfig({
99
vite: {
10+
ssr: {
11+
noExternal: [
12+
'angular-three',
13+
'angular-three-soba/**',
14+
'@angular/common',
15+
'@angular/core',
16+
'@angular/core/rxjs-interop',
17+
'ngxtension/**',
18+
],
19+
},
1020
esbuild: {
1121
jsxDev: true,
1222
},
13-
// plugins: [
14-
// {
15-
// name: 'test',
16-
// enforce: 'post',
17-
// config: (config) => {
18-
// return { esbuild: { jsxDev: true } };
19-
// },
20-
// },
21-
// ],
2223
},
2324
integrations: [
2425
analogjsangular({
2526
vite: {
2627
experimental: {
2728
supportAnalogFormat: true,
2829
},
29-
// transformFilter: (code, id) => {
30-
// console.trace('in transform filter');
31-
// // console.log('in transform filter', {
32-
// // id,
33-
// // evaluated: id.includes('components') && !id.includes('astro') && !id.startsWith('\\x'),
34-
// // });
35-
// return false;
36-
// },
3730
},
3831
}),
3932
starlight({
4033
title: 'Angular Three',
34+
logo: {
35+
light: './src/assets/angular-three.svg',
36+
dark: './src/assets/angular-three-dark.svg',
37+
},
4138
social: {
4239
github: 'https://github.com/angular-threejs/angular-three',
4340
},
41+
customCss: ['./src/tailwind.css'],
4442
sidebar: [
43+
{
44+
label: 'Introduction',
45+
slug: '',
46+
},
47+
{
48+
label: 'Core',
49+
items: [
50+
{
51+
label: 'Getting Started',
52+
items: [
53+
{
54+
label: 'Installation',
55+
slug: 'core/getting-started/installation',
56+
},
57+
{
58+
label: 'First Scene',
59+
slug: 'core/getting-started/first-scene',
60+
},
61+
],
62+
},
63+
],
64+
},
4565
{
4666
label: 'Guides',
4767
items: [
@@ -64,6 +84,8 @@ export default defineConfig({
6484
plugins: [pluginLineNumbers()],
6585
},
6686
}),
67-
tailwind(),
87+
tailwind({
88+
applyBaseStyles: false,
89+
}),
6890
],
6991
});

‎apps/astro-docs/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13-
"@analogjs/astro-angular": "^1.6.2",
13+
"@analogjs/astro-angular": "^1.6.3",
1414
"@angular-devkit/build-angular": "^18.1.1",
1515
"@angular/animations": "^18.1.1",
1616
"@angular/common": "^18.1.1",
@@ -25,7 +25,10 @@
2525
"@astrojs/mdx": "^3.1.3",
2626
"@astrojs/starlight": "^0.25.1",
2727
"@astrojs/tailwind": "^5.1.0",
28-
"angular-three": "2.0.0-beta.264",
28+
"angular-three": "file:../../dist/libs/core",
29+
"angular-three-cannon": "file:../../dist/libs/cannon",
30+
"angular-three-postprocessing": "file:../../dist/libs/postprocessing",
31+
"angular-three-soba": "file:../../dist/libs/soba",
2932
"astro": "^4.10.2",
3033
"ngxtension": "^4.0.0",
3134
"rxjs": "^7.8.1",
@@ -38,6 +41,7 @@
3841
},
3942
"nx": {},
4043
"devDependencies": {
44+
"@astrojs/starlight-tailwind": "^2.0.3",
4145
"@expressive-code/plugin-line-numbers": "^0.35.3",
4246
"@types/three": "^0.166.0"
4347
},

‎apps/astro-docs/src/assets/angular-three-dark.svg

Lines changed: 34 additions & 0 deletions
Loading

‎apps/astro-docs/src/assets/angular-three.svg

Lines changed: 34 additions & 0 deletions
Loading

‎apps/astro-docs/src/components/first-scene/first-scene.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
2+
import { extend, NgtCanvas } from 'angular-three';
3+
import * as THREE from 'three';
4+
import { scenes } from './scenes';
5+
6+
extend(THREE);
7+
8+
@Component({
9+
standalone: true,
10+
template: `
11+
<ngt-canvas [sceneGraph]="sceneGraph()" />
12+
`,
13+
imports: [NgtCanvas],
14+
changeDetection: ChangeDetectionStrategy.OnPush,
15+
host: { class: 'first-scene' },
16+
})
17+
export class FirstScene {
18+
step = input.required<keyof typeof scenes>();
19+
sceneGraph = computed(() => scenes[this.step()]);
20+
}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-five.ts

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
type ElementRef,
6+
input,
7+
signal,
8+
viewChild,
9+
} from '@angular/core';
10+
import { injectBeforeRender, type NgtVector3 } from 'angular-three';
11+
import { Mesh } from 'three';
12+
13+
@Component({
14+
selector: 'app-cube',
15+
standalone: true,
16+
template: `
17+
<ngt-mesh
18+
#mesh
19+
[position]="position()"
20+
[scale]="clicked() ? 1.5 : 1"
21+
(pointerover)="hovered.set(true)"
22+
(pointerout)="hovered.set(false)"
23+
(click)="clicked.set(!clicked())"
24+
>
25+
<ngt-box-geometry />
26+
<ngt-mesh-standard-material [color]="hovered() ? 'darkred' : 'mediumpurple'" />
27+
</ngt-mesh>
28+
`,
29+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
})
32+
class Cube {
33+
position = input<NgtVector3>([0, 0, 0]);
34+
35+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
36+
37+
hovered = signal(false);
38+
clicked = signal(false);
39+
40+
constructor() {
41+
injectBeforeRender(({ delta }) => {
42+
const mesh = this.meshRef().nativeElement;
43+
mesh.rotation.x += delta;
44+
mesh.rotation.y += delta;
45+
});
46+
}
47+
}
48+
49+
@Component({
50+
standalone: true,
51+
template: `
52+
<ngt-ambient-light [intensity]="0.5" />
53+
<ngt-spot-light [position]="10" [intensity]="0.5 * Math.PI" [angle]="0.15" [penumbra]="1" [decay]="0" />
54+
<ngt-point-light [position]="-10" [intensity]="0.5 * Math.PI" [decay]="0" />
55+
56+
<app-cube [position]="[1.5, 0, 0]" />
57+
<app-cube [position]="[-1.5, 0, 0]" />
58+
`,
59+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
60+
changeDetection: ChangeDetectionStrategy.OnPush,
61+
imports: [Cube],
62+
})
63+
export class SceneGraphStepFive {
64+
protected readonly Math = Math;
65+
}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-four.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
type ElementRef,
6+
input,
7+
signal,
8+
viewChild,
9+
} from '@angular/core';
10+
import { injectBeforeRender, type NgtVector3 } from 'angular-three';
11+
import { Mesh } from 'three';
12+
13+
@Component({
14+
selector: 'app-cube',
15+
standalone: true,
16+
template: `
17+
<ngt-mesh
18+
#mesh
19+
[position]="position()"
20+
[scale]="clicked() ? 1.5 : 1"
21+
(pointerover)="hovered.set(true)"
22+
(pointerout)="hovered.set(false)"
23+
(click)="clicked.set(!clicked())"
24+
>
25+
<ngt-box-geometry />
26+
<ngt-mesh-basic-material [color]="hovered() ? 'darkred' : 'mediumpurple'" />
27+
</ngt-mesh>
28+
`,
29+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
30+
changeDetection: ChangeDetectionStrategy.OnPush,
31+
})
32+
class Cube {
33+
position = input<NgtVector3>([0, 0, 0]);
34+
35+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
36+
37+
hovered = signal(false);
38+
clicked = signal(false);
39+
40+
constructor() {
41+
injectBeforeRender(({ delta }) => {
42+
const mesh = this.meshRef().nativeElement;
43+
mesh.rotation.x += delta;
44+
mesh.rotation.y += delta;
45+
});
46+
}
47+
}
48+
49+
@Component({
50+
standalone: true,
51+
template: `
52+
<app-cube [position]="[1.5, 0, 0]" />
53+
<app-cube [position]="[-1.5, 0, 0]" />
54+
`,
55+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
56+
changeDetection: ChangeDetectionStrategy.OnPush,
57+
imports: [Cube],
58+
})
59+
export class SceneGraphStepFour {}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-one.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
2+
3+
@Component({
4+
standalone: true,
5+
template: `
6+
<ngt-mesh>
7+
<ngt-box-geometry />
8+
</ngt-mesh>
9+
`,
10+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
11+
changeDetection: ChangeDetectionStrategy.OnPush,
12+
})
13+
export class SceneGraphStepOne {}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-six.ts

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
type ElementRef,
6+
input,
7+
signal,
8+
viewChild,
9+
} from '@angular/core';
10+
import { extend, injectBeforeRender, injectStore, NgtArgs, type NgtVector3 } from 'angular-three';
11+
import { Mesh } from 'three';
12+
import { OrbitControls } from 'three-stdlib';
13+
14+
extend({ OrbitControls });
15+
16+
@Component({
17+
selector: 'app-cube',
18+
standalone: true,
19+
template: `
20+
<ngt-mesh
21+
#mesh
22+
[position]="position()"
23+
[scale]="clicked() ? 1.5 : 1"
24+
(pointerover)="hovered.set(true)"
25+
(pointerout)="hovered.set(false)"
26+
(click)="clicked.set(!clicked())"
27+
>
28+
<ngt-box-geometry />
29+
<ngt-mesh-standard-material [color]="hovered() ? 'darkred' : 'mediumpurple'" />
30+
</ngt-mesh>
31+
`,
32+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
33+
changeDetection: ChangeDetectionStrategy.OnPush,
34+
})
35+
class Cube {
36+
position = input<NgtVector3>([0, 0, 0]);
37+
38+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
39+
40+
hovered = signal(false);
41+
clicked = signal(false);
42+
43+
constructor() {
44+
injectBeforeRender(({ delta }) => {
45+
const mesh = this.meshRef().nativeElement;
46+
mesh.rotation.x += delta;
47+
mesh.rotation.y += delta;
48+
});
49+
}
50+
}
51+
52+
@Component({
53+
standalone: true,
54+
template: `
55+
<ngt-ambient-light [intensity]="0.5" />
56+
<ngt-spot-light [position]="10" [intensity]="0.5 * Math.PI" [angle]="0.15" [penumbra]="1" [decay]="0" />
57+
<ngt-point-light [position]="-10" [intensity]="0.5 * Math.PI" [decay]="0" />
58+
59+
<app-cube [position]="[1.5, 0, 0]" />
60+
<app-cube [position]="[-1.5, 0, 0]" />
61+
62+
<ngt-orbit-controls *args="[camera(), glDomElement()]" />
63+
<ngt-grid-helper />
64+
`,
65+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
66+
changeDetection: ChangeDetectionStrategy.OnPush,
67+
imports: [Cube, NgtArgs],
68+
})
69+
export class SceneGraphStepSix {
70+
protected readonly Math = Math;
71+
72+
private store = injectStore();
73+
protected camera = this.store.select('camera');
74+
protected glDomElement = this.store.select('gl', 'domElement');
75+
}

‎apps/astro-docs/src/components/first-scene/scene-graph-step-three.ts

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {
2+
ChangeDetectionStrategy,
3+
Component,
4+
CUSTOM_ELEMENTS_SCHEMA,
5+
type ElementRef,
6+
signal,
7+
viewChild,
8+
} from '@angular/core';
9+
import { injectBeforeRender } from 'angular-three';
10+
import { Mesh } from 'three';
11+
12+
@Component({
13+
standalone: true,
14+
template: `
15+
<ngt-mesh
16+
#mesh
17+
[scale]="clicked() ? 1.5 : 1"
18+
(pointerover)="hovered.set(true)"
19+
(pointerout)="hovered.set(false)"
20+
(click)="clicked.set(!clicked())"
21+
>
22+
<ngt-box-geometry />
23+
<ngt-mesh-basic-material [color]="hovered() ? 'darkred' : 'mediumpurple'" />
24+
</ngt-mesh>
25+
`,
26+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
27+
changeDetection: ChangeDetectionStrategy.OnPush,
28+
})
29+
export class SceneGraphStepThree {
30+
meshRef = viewChild.required<ElementRef<Mesh>>('mesh');
31+
32+
hovered = signal(false);
33+
clicked = signal(false);
34+
35+
constructor() {
36+
injectBeforeRender(({ delta }) => {
37+
const mesh = this.meshRef().nativeElement;
38+
mesh.rotation.x += delta;
39+
mesh.rotation.y += delta;
40+
});
41+
}
42+
}

0 commit comments

Comments
 (0)