detailed

Author: nartc

libs/soba/abstractions/src/detailed/detailed.ts

@@ -0,0 +1,67 @@
+import { CUSTOM_ELEMENTS_SCHEMA, Component, Input, effect } from '@angular/core';
+import { NgtBeforeRenderEvent, extend, injectNgtRef, signalStore, type NgtLOD } from 'angular-three';
+import { LOD } from 'three';
+
+extend({ LOD });
+
+export type NgtsDetailedState = {
+	hysteresis: number;
+	distances: number[];
+};
+
+declare global {
+	interface HTMLElementTagNameMap {
+		/**
+		 * @extends ngt-lOD
+		 */
+		'ngts-detailed': NgtsDetailedState & NgtLOD;
+	}
+}
+
+@Component({
+	selector: 'ngts-detailed',
+	standalone: true,
+	template: `
+		<ngt-lOD ngtCompound [ref]="lodRef" (beforeRender)="onBeforeRender($event)">
+			<ng-content />
+		</ngt-lOD>
+	`,
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class NgtsDetailed {
+	private inputs = signalStore<NgtsDetailedState>({ hysteresis: 0 });
+
+	@Input() lodRef = injectNgtRef<LOD>();
+
+	@Input({ required: true, alias: 'distances' }) set _distances(distances: number[]) {
+		this.inputs.set({ distances });
+	}
+
+	@Input({ alias: 'hysteresis' }) set _hysteresis(hysteresis: number) {
+		this.inputs.set({ hysteresis });
+	}
+
+	constructor() {
+		this.updateChildren();
+	}
+
+	onBeforeRender({ object, state }: NgtBeforeRenderEvent<LOD>) {
+		object.update(state.camera);
+	}
+
+	private updateChildren() {
+		const lodChildren = this.lodRef.children();
+		const _distances = this.inputs.select('distances');
+		const _hysteresis = this.inputs.select('hysteresis');
+
+		effect(() => {
+			const lod = this.lodRef.nativeElement;
+			if (!lod) return;
+			const [distances, hysteresis, children] = [_distances(), _hysteresis(), lodChildren()];
+			lod.levels.length = 0;
+			children.forEach((child, index) => {
+				lod.addLevel(child, distances[index], hysteresis);
+			});
+		});
+	}
+}

libs/soba/abstractions/src/index.ts

@@ -1,4 +1,5 @@
 export * from './billboard/billboard';
+export * from './detailed/detailed';
 export * from './grid/grid';
 export * from './text-3d/text-3d';
 export * from './text/text';

libs/soba/src/abstractions/detailed.stories.ts

@@ -0,0 +1,42 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Meta, StoryFn } from '@storybook/angular';
+import { NgtArgs } from 'angular-three';
+import { NgtsDetailed } from 'angular-three-soba/abstractions';
+import { NgtsOrbitControls } from 'angular-three-soba/controls';
+import { makeDecorators, makeStoryFunction } from '../setup-canvas';
+
+@Component({
+	standalone: true,
+	template: `
+		<ngts-detailed [distances]="[0, 50, 150]">
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 3]" />
+				<ngt-mesh-basic-material color="hotpink" [wireframe]="true" />
+			</ngt-mesh>
+
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 2]" />
+				<ngt-mesh-basic-material color="lightgreen" [wireframe]="true" />
+			</ngt-mesh>
+
+			<ngt-mesh>
+				<ngt-icosahedron-geometry *args="[10, 1]" />
+				<ngt-mesh-basic-material color="lightblue" [wireframe]="true" />
+			</ngt-mesh>
+		</ngts-detailed>
+		<ngts-orbit-controls [enablePan]="false" [enableRotate]="false" [zoomSpeed]="0.5" />
+	`,
+	imports: [NgtsDetailed, NgtsOrbitControls, NgtArgs],
+	schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+class DefaultDetailedStory {}
+
+export default {
+	title: 'Abstractions/Detailed',
+	decorators: makeDecorators(),
+} as Meta;
+
+export const Default: StoryFn = makeStoryFunction(DefaultDetailedStory, {
+	controls: false,
+	camera: { position: [0, 0, 100] },
+});

tools/scripts/generate-soba-json.mjs

@@ -43,6 +43,7 @@ const entryPoints = {
 		'stars',
 		'accumulative-shadows',
 		'accumulative-shadows/randomized-lights',
+		'stage',
 	],
 };