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

Skip to content

Commit a3995f1

Browse files
nartcnartc
committed
docs: add release v2 blog
1 parent dca444f commit a3995f1

File tree

7 files changed

+724
-3
lines changed

7 files changed

+724
-3
lines changed

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import analogjsangular from '@analogjs/astro-angular';
22
import starlight from '@astrojs/starlight';
33
import tailwind from '@astrojs/tailwind';
44
import { defineConfig } from 'astro/config';
5-
import { readFileSync } from 'fs';
5+
import { readFileSync } from 'node:fs';
6+
import starlightBlog from 'starlight-blog';
67

78
function includeContentPlugin() {
89
const map = new Map();
@@ -71,6 +72,17 @@ export default defineConfig({
7172
}),
7273
starlight({
7374
title: 'Angular Three',
75+
plugins: [
76+
starlightBlog({
77+
authors: {
78+
chau: {
79+
name: 'Chau Tran',
80+
url: 'https://nartc.me',
81+
picture: 'https://avatars.githubusercontent.com/u/25516557?v=4',
82+
},
83+
},
84+
}),
85+
],
7486
favicon: './src/assets/angular-three-dark.svg',
7587
tableOfContents: {
7688
minHeadingLevel: 2,

‎apps/astro-docs/src/components/hud/hud.ts

Lines changed: 197 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,197 @@
1+
import {
2+
CUSTOM_ELEMENTS_SCHEMA,
3+
ChangeDetectionStrategy,
4+
Component,
5+
ElementRef,
6+
computed,
7+
inject,
8+
input,
9+
signal,
10+
viewChild,
11+
} from '@angular/core';
12+
import {
13+
NgtArgs,
14+
NgtCanvas,
15+
NgtPortal,
16+
NgtPortalContent,
17+
extend,
18+
injectBeforeRender,
19+
injectStore,
20+
} from 'angular-three';
21+
import { NgtsText } from 'angular-three-soba/abstractions';
22+
import { NgtsOrthographicCamera, NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
23+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
24+
import { NgtsEnvironment, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
25+
import * as THREE from 'three';
26+
import { Matrix4, Mesh, Scene } from 'three';
27+
28+
extend(THREE);
29+
30+
@Component({
31+
selector: 'app-torus',
32+
standalone: true,
33+
template: `
34+
<ngt-mesh [scale]="scale()" (pointerover)="hovered.set(true)" (pointerout)="hovered.set(false)">
35+
<ngt-torus-geometry *args="[1, 0.25, 32, 100]" />
36+
<ngt-mesh-standard-material [color]="color()" />
37+
</ngt-mesh>
38+
`,
39+
imports: [NgtArgs],
40+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
41+
changeDetection: ChangeDetectionStrategy.OnPush,
42+
})
43+
export class Torus {
44+
scale = input(1);
45+
hovered = signal(false);
46+
color = computed(() => (this.hovered() ? 'hotpink' : 'orange'));
47+
}
48+
49+
@Component({
50+
selector: 'app-face-material',
51+
standalone: true,
52+
template: `
53+
<ngt-mesh-standard-material [attach]="['material', index()]" [color]="color()">
54+
<ngts-render-texture [options]="{ frames: 6, anisotropy: 16 }">
55+
<ng-template renderTextureContent>
56+
<ngt-color *args="['white']" attach="background" />
57+
<ngts-orthographic-camera
58+
[options]="{ makeDefault: true, left: -1, right: 1, top: 1, bottom: -1, position: [0, 0, 10], zoom: 0.5 }"
59+
/>
60+
<ngts-text
61+
[text]="text()"
62+
[options]="{ color: 'black', font: 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff' }"
63+
/>
64+
</ng-template>
65+
</ngts-render-texture>
66+
</ngt-mesh-standard-material>
67+
`,
68+
imports: [NgtsText, NgtsRenderTexture, NgtsOrthographicCamera, NgtArgs, NgtsRenderTextureContent],
69+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
70+
changeDetection: ChangeDetectionStrategy.OnPush,
71+
})
72+
export class FaceMaterial {
73+
index = input.required<number>();
74+
text = input.required<string>();
75+
76+
box = inject(Box);
77+
78+
color = computed(() => (this.box.hovered() === this.index() ? 'hotpink' : 'orange'));
79+
}
80+
81+
@Component({
82+
selector: 'app-box',
83+
standalone: true,
84+
template: `
85+
<ngt-mesh
86+
#mesh
87+
[position]="position()"
88+
[scale]="scale()"
89+
(click)="clicked.set(!clicked())"
90+
(pointermove)="$event.stopPropagation(); hovered.set($any($event).face.materialIndex)"
91+
(pointerout)="hovered.set(-1)"
92+
>
93+
<ngt-box-geometry />
94+
@for (face of faces; track face) {
95+
<app-face-material [index]="$index" [text]="face" />
96+
}
97+
</ngt-mesh>
98+
`,
99+
imports: [FaceMaterial],
100+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
101+
changeDetection: ChangeDetectionStrategy.OnPush,
102+
})
103+
export class Box {
104+
position = input([0, 0, 0]);
105+
106+
mesh = viewChild.required<ElementRef<Mesh>>('mesh');
107+
108+
hovered = signal(-1);
109+
clicked = signal(false);
110+
111+
scale = computed(() => (this.clicked() ? 1.5 : 1));
112+
113+
faces = ['front', 'back', 'top', 'bottom', 'left', 'right'];
114+
}
115+
116+
@Component({
117+
selector: 'app-view-cube',
118+
standalone: true,
119+
template: `
120+
<ngt-portal [container]="scene()" [autoRender]="true">
121+
<ng-template portalContent>
122+
<ngt-ambient-light [intensity]="Math.PI / 2" />
123+
<ngt-spot-light [position]="[10, 10, 10]" [angle]="0.15" [penumbra]="0" [decay]="0" [intensity]="Math.PI" />
124+
<ngt-point-light [position]="[-10, -10, -10]" [decay]="0" [intensity]="Math.PI" />
125+
<ngts-perspective-camera [options]="{ makeDefault: true, position: [0, 0, 10] }" />
126+
<app-box [position]="boxPosition()" />
127+
<ngt-ambient-light [intensity]="1" />
128+
<ngt-point-light [position]="[200, 200, 100]" [intensity]="0.5" />
129+
</ng-template>
130+
</ngt-portal>
131+
`,
132+
imports: [Box, NgtPortal, NgtPortalContent, NgtsPerspectiveCamera],
133+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
134+
changeDetection: ChangeDetectionStrategy.OnPush,
135+
})
136+
export class ViewCube {
137+
protected readonly Math = Math;
138+
139+
private store = injectStore();
140+
private camera = this.store.select('camera');
141+
private viewport = this.store.select('viewport');
142+
143+
box = viewChild(Box);
144+
145+
boxPosition = computed(() => [this.viewport().width / 2 - 1, this.viewport().height / 2 - 1, 0]);
146+
147+
scene = computed(() => {
148+
const scene = new Scene();
149+
scene.name = 'hud-view-cube-virtual-scene';
150+
return scene;
151+
});
152+
153+
constructor() {
154+
const matrix = new Matrix4();
155+
injectBeforeRender(() => {
156+
const box = this.box()?.mesh().nativeElement;
157+
if (box) {
158+
matrix.copy(this.camera().matrix).invert();
159+
box.quaternion.setFromRotationMatrix(matrix);
160+
}
161+
});
162+
}
163+
}
164+
165+
@Component({
166+
standalone: true,
167+
template: `
168+
<ngt-color *args="['#dcdcdc']" attach="background" />
169+
<ngt-ambient-light [intensity]="0.5 * Math.PI" />
170+
171+
<app-torus [scale]="1.75" />
172+
<app-view-cube />
173+
174+
<ngts-orbit-controls />
175+
<ngts-environment [options]="{ preset: 'city' }" />
176+
`,
177+
imports: [NgtsOrbitControls, NgtsEnvironment, Torus, ViewCube, NgtArgs],
178+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
179+
changeDetection: ChangeDetectionStrategy.OnPush,
180+
host: { class: 'hud-experience' },
181+
})
182+
export class Experience {
183+
protected readonly Math = Math;
184+
}
185+
186+
@Component({
187+
standalone: true,
188+
template: `
189+
<ngt-canvas [sceneGraph]="scene" />
190+
`,
191+
imports: [NgtCanvas],
192+
changeDetection: ChangeDetectionStrategy.OnPush,
193+
host: { class: 'hud-docs' },
194+
})
195+
export default class HudScene {
196+
scene = Experience;
197+
}

‎apps/astro-docs/src/components/lightformer/lightformer.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, ElementRef, viewChild } from '@angular/core';
2+
import { extend, injectBeforeRender, NgtArgs, NgtCanvas } from 'angular-three';
3+
import { NgtsOrbitControls } from 'angular-three-soba/controls';
4+
import { NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
5+
import * as THREE from 'three';
6+
import { Mesh } from 'three';
7+
8+
extend(THREE);
9+
10+
@Component({
11+
standalone: true,
12+
template: `
13+
<ngts-environment [options]="{ background: true, preset: 'sunset' }">
14+
<ng-template>
15+
<ngt-color *args="['black']" attach="background" />
16+
<ngts-lightformer [options]="{ position: [0, 0, -5], scale: 10, color: 'red', intensity: 10, form: 'ring' }" />
17+
</ng-template>
18+
</ngts-environment>
19+
20+
<ngt-mesh [position]="[-1.5, 0, 0]">
21+
<ngt-sphere-geometry />
22+
<ngt-mesh-standard-material color="orange" />
23+
</ngt-mesh>
24+
25+
<ngt-mesh #cube [position]="[1.5, 0, 0]" [scale]="1.5">
26+
<ngt-box-geometry />
27+
<ngt-mesh-standard-material color="mediumpurple" />
28+
</ngt-mesh>
29+
30+
<ngt-mesh [position]="[0, -1, 0]" [rotation]="[-Math.PI / 2, 0, 0]" [scale]="10">
31+
<ngt-plane-geometry />
32+
<ngt-mesh-standard-material color="greenyellow" />
33+
</ngt-mesh>
34+
35+
<ngts-contact-shadows
36+
[options]="{ position: [0, -0.99, 0], scale: 10, resolution: 512, opacity: 0.4, blur: 2.8 }"
37+
/>
38+
39+
<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true, autoRotateSpeed: 0.5, enablePan: false }" />
40+
`,
41+
imports: [NgtsEnvironment, NgtsLightformer, NgtsContactShadows, NgtArgs, NgtsOrbitControls],
42+
changeDetection: ChangeDetectionStrategy.OnPush,
43+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
44+
})
45+
export class Experience {
46+
protected readonly Math = Math;
47+
48+
private cube = viewChild.required<ElementRef<Mesh>>('cube');
49+
50+
constructor() {
51+
injectBeforeRender(({ delta }) => {
52+
const cube = this.cube().nativeElement;
53+
cube.rotation.y += delta * 0.2;
54+
});
55+
}
56+
}
57+
58+
@Component({
59+
standalone: true,
60+
template: `
61+
<ngt-canvas [sceneGraph]="scene" [camera]="{ position: [-3, 3, 3] }" />
62+
`,
63+
schemas: [CUSTOM_ELEMENTS_SCHEMA],
64+
changeDetection: ChangeDetectionStrategy.OnPush,
65+
imports: [NgtCanvas],
66+
})
67+
export default class LightformerScene {
68+
scene = Experience;
69+
}

‎apps/astro-docs/src/content/config.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { docsSchema } from '@astrojs/starlight/schema';
22
import { defineCollection } from 'astro:content';
3+
import { blogSchema } from 'starlight-blog/schema';
34

45
export const collections = {
5-
docs: defineCollection({ schema: docsSchema() }),
6+
docs: defineCollection({
7+
schema: docsSchema({ extend: (context) => blogSchema(context) }),
8+
}),
69
};

0 commit comments

Comments
 (0)