angular-threejs · nartc · Sep 3, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 3, 2024
diff --git a/apps/astro-docs/astro.config.mjs b/apps/astro-docs/astro.config.mjs
@@ -2,7 +2,8 @@ import analogjsangular from '@analogjs/astro-angular';
 import starlight from '@astrojs/starlight';
 import tailwind from '@astrojs/tailwind';
 import { defineConfig } from 'astro/config';
-import { readFileSync } from 'fs';
+import { readFileSync } from 'node:fs';
+import starlightBlog from 'starlight-blog';
 
 function includeContentPlugin() {
 	const map = new Map();
@@ -71,6 +72,17 @@ export default defineConfig({
 		}),
 		starlight({
 			title: 'Angular Three',
+			plugins: [
+				starlightBlog({
+					authors: {
+						chau: {
+							name: 'Chau Tran',
+							url: 'https://nartc.me',
+							picture: 'https://avatars.githubusercontent.com/u/25516557?v=4',
+						},
+					},
+				}),
+			],
 			favicon: './src/assets/angular-three-dark.svg',
 			tableOfContents: {
 				minHeadingLevel: 2,

diff --git a/apps/astro-docs/package.json b/apps/astro-docs/package.json
@@ -12,15 +12,16 @@
   "dependencies": {
     "@analogjs/astro-angular": "^1.6.4-beta.1",
     "@astrojs/check": "^0.9.3",
-    "@astrojs/mdx": "^3.1.3",
-    "@astrojs/starlight": "^0.26.1",
+    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/starlight": "^0.26.2",
     "@astrojs/tailwind": "^5.1.0",
     "angular-three": "^2.0.0-beta.314",
     "angular-three-cannon": "^2.0.0-beta.314",
     "angular-three-postprocessing": "^2.0.0-beta.314",
     "angular-three-soba": "^2.0.0-beta.314",
-    "astro": "^4.14.2",
+    "astro": "^4.15.2",
     "sharp": "^0.32.5",
+    "starlight-blog": "^0.12.0",
     "tailwindcss": "^3.4.6"
   },
   "nx": {},

diff --git a/apps/astro-docs/src/components/hud/hud.ts b/apps/astro-docs/src/components/hud/hud.ts
@@ -0,0 +1,197 @@
+import {
+	CUSTOM_ELEMENTS_SCHEMA,
+	ChangeDetectionStrategy,
+	Component,
+	ElementRef,
+	computed,
+	inject,
+	input,
+	signal,
+	viewChild,
+} from '@angular/core';
+import {
+	NgtArgs,
+	NgtCanvas,
+	NgtPortal,
+	NgtPortalContent,
+	extend,
+	injectBeforeRender,
+	injectStore,
+} from 'angular-three';
+import { NgtsText } from 'angular-three-soba/abstractions';
+import { NgtsOrthographicCamera, NgtsPerspectiveCamera } from 'angular-three-soba/cameras';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsEnvironment, NgtsRenderTexture, NgtsRenderTextureContent } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { Matrix4, Mesh, Scene } from 'three';
+
+extend(THREE);
+
+@Component({
+	selector: 'app-torus',
+	standalone: true,
+	template: `
+		<ngt-mesh [scale]="scale()" (pointerover)="hovered.set(true)" (pointerout)="hovered.set(false)">
+			<ngt-torus-geometry *args="[1, 0.25, 32, 100]" />
+			<ngt-mesh-standard-material [color]="color()" />
+		</ngt-mesh>
+	`,
+	imports: [NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Torus {
+	scale = input(1);
+	hovered = signal(false);
+	color = computed(() => (this.hovered() ? 'hotpink' : 'orange'));
+}
+
+@Component({
+	selector: 'app-face-material',
+	standalone: true,
+	template: `
+		<ngt-mesh-standard-material [attach]="['material', index()]" [color]="color()">
+			<ngts-render-texture [options]="{ frames: 6, anisotropy: 16 }">
+				<ng-template renderTextureContent>
+					<ngt-color *args="['white']" attach="background" />
+					<ngts-orthographic-camera
+						[options]="{ makeDefault: true, left: -1, right: 1, top: 1, bottom: -1, position: [0, 0, 10], zoom: 0.5 }"
+					/>
+					<ngts-text
+						[text]="text()"
+						[options]="{ color: 'black', font: 'https://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwK4vaqI.woff' }"
+					/>
+				</ng-template>
+			</ngts-render-texture>
+		</ngt-mesh-standard-material>
+	`,
+	imports: [NgtsText, NgtsRenderTexture, NgtsOrthographicCamera, NgtArgs, NgtsRenderTextureContent],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class FaceMaterial {
+	index = input.required<number>();
+	text = input.required<string>();
+
+	box = inject(Box);
+
+	color = computed(() => (this.box.hovered() === this.index() ? 'hotpink' : 'orange'));
+}
+
+@Component({
+	selector: 'app-box',
+	standalone: true,
+	template: `
+		<ngt-mesh
+			#mesh
+			[position]="position()"
+			[scale]="scale()"
+			(click)="clicked.set(!clicked())"
+			(pointermove)="$event.stopPropagation(); hovered.set($any($event).face.materialIndex)"
+			(pointerout)="hovered.set(-1)"
+		>
+			<ngt-box-geometry />
+			@for (face of faces; track face) {
+				<app-face-material [index]="$index" [text]="face" />
+			}
+		</ngt-mesh>
+	`,
+	imports: [FaceMaterial],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Box {
+	position = input([0, 0, 0]);
+
+	mesh = viewChild.required<ElementRef<Mesh>>('mesh');
+
+	hovered = signal(-1);
+	clicked = signal(false);
+
+	scale = computed(() => (this.clicked() ? 1.5 : 1));
+
+	faces = ['front', 'back', 'top', 'bottom', 'left', 'right'];
+}
+
+@Component({
+	selector: 'app-view-cube',
+	standalone: true,
+	template: `
+		<ngt-portal [container]="scene()" [autoRender]="true">
+			<ng-template portalContent>
+				<ngt-ambient-light [intensity]="Math.PI / 2" />
+				<ngt-spot-light [position]="[10, 10, 10]" [angle]="0.15" [penumbra]="0" [decay]="0" [intensity]="Math.PI" />
+				<ngt-point-light [position]="[-10, -10, -10]" [decay]="0" [intensity]="Math.PI" />
+				<ngts-perspective-camera [options]="{ makeDefault: true, position: [0, 0, 10] }" />
+				<app-box [position]="boxPosition()" />
+				<ngt-ambient-light [intensity]="1" />
+				<ngt-point-light [position]="[200, 200, 100]" [intensity]="0.5" />
+			</ng-template>
+		</ngt-portal>
+	`,
+	imports: [Box, NgtPortal, NgtPortalContent, NgtsPerspectiveCamera],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ViewCube {
+	protected readonly Math = Math;
+
+	private store = injectStore();
+	private camera = this.store.select('camera');
+	private viewport = this.store.select('viewport');
+
+	box = viewChild(Box);
+
+	boxPosition = computed(() => [this.viewport().width / 2 - 1, this.viewport().height / 2 - 1, 0]);
+
+	scene = computed(() => {
+		const scene = new Scene();
+		scene.name = 'hud-view-cube-virtual-scene';
+		return scene;
+	});
+
+	constructor() {
+		const matrix = new Matrix4();
+		injectBeforeRender(() => {
+			const box = this.box()?.mesh().nativeElement;
+			if (box) {
+				matrix.copy(this.camera().matrix).invert();
+				box.quaternion.setFromRotationMatrix(matrix);
+			}
+		});
+	}
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-color *args="['#dcdcdc']" attach="background" />
+		<ngt-ambient-light [intensity]="0.5 * Math.PI" />
+
+		<app-torus [scale]="1.75" />
+		<app-view-cube />
+
+		<ngts-orbit-controls />
+		<ngts-environment [options]="{ preset: 'city' }" />
+	`,
+	imports: [NgtsOrbitControls, NgtsEnvironment, Torus, ViewCube, NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'hud-experience' },
+})
+export class Experience {
+	protected readonly Math = Math;
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-canvas [sceneGraph]="scene" />
+	`,
+	imports: [NgtCanvas],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	host: { class: 'hud-docs' },
+})
+export default class HudScene {
+	scene = Experience;
+}
diff --git a/apps/astro-docs/src/components/lightformer/lightformer.ts b/apps/astro-docs/src/components/lightformer/lightformer.ts
@@ -0,0 +1,69 @@
+import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, viewChild } from '@angular/core';
+import { extend, injectBeforeRender, NgtArgs, NgtCanvas } from 'angular-three';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { NgtsContactShadows, NgtsEnvironment, NgtsLightformer } from 'angular-three-soba/staging';
+import * as THREE from 'three';
+import { Mesh } from 'three';
+
+extend(THREE);
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-environment [options]="{ background: true, preset: 'sunset' }">
+			<ng-template>
+				<ngt-color *args="['black']" attach="background" />
+				<ngts-lightformer [options]="{ position: [0, 0, -5], scale: 10, color: 'red', intensity: 10, form: 'ring' }" />
+			</ng-template>
+		</ngts-environment>
+
+		<ngt-mesh [position]="[-1.5, 0, 0]">
+			<ngt-sphere-geometry />
+			<ngt-mesh-standard-material color="orange" />
+		</ngt-mesh>
+
+		<ngt-mesh #cube [position]="[1.5, 0, 0]" [scale]="1.5">
+			<ngt-box-geometry />
+			<ngt-mesh-standard-material color="mediumpurple" />
+		</ngt-mesh>
+
+		<ngt-mesh [position]="[0, -1, 0]" [rotation]="[-Math.PI / 2, 0, 0]" [scale]="10">
+			<ngt-plane-geometry />
+			<ngt-mesh-standard-material color="greenyellow" />
+		</ngt-mesh>
+
+		<ngts-contact-shadows
+			[options]="{ position: [0, -0.99, 0], scale: 10, resolution: 512, opacity: 0.4, blur: 2.8 }"
+		/>
+
+		<ngts-orbit-controls [options]="{ makeDefault: true, autoRotate: true, autoRotateSpeed: 0.5, enablePan: false }" />
+	`,
+	imports: [NgtsEnvironment, NgtsLightformer, NgtsContactShadows, NgtArgs, NgtsOrbitControls],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Experience {
+	protected readonly Math = Math;
+
+	private cube = viewChild.required<ElementRef<Mesh>>('cube');
+
+	constructor() {
+		injectBeforeRender(({ delta }) => {
+			const cube = this.cube().nativeElement;
+			cube.rotation.y += delta * 0.2;
+		});
+	}
+}
+
+@Component({
+	standalone: true,
+	template: `
+		<ngt-canvas [sceneGraph]="scene" [camera]="{ position: [-3, 3, 3] }" />
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+	changeDetection: ChangeDetectionStrategy.OnPush,
+	imports: [NgtCanvas],
+})
+export default class LightformerScene {
+	scene = Experience;
+}
diff --git a/apps/astro-docs/src/content/config.ts b/apps/astro-docs/src/content/config.ts
@@ -1,6 +1,9 @@
 import { docsSchema } from '@astrojs/starlight/schema';
 import { defineCollection } from 'astro:content';
+import { blogSchema } from 'starlight-blog/schema';
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
+	docs: defineCollection({
+		schema: docsSchema({ extend: (context) => blogSchema(context) }),
+	}),
 };