angular-three-soba 4.2.0 → 4.2.2

package/fesm2022/angular-three-soba-stats.mjs

@@ -39,7 +39,7 @@ class NgtsStats {
          * Configuration options for the stats panel.
          * Accepts a partial NgtsStatsOptions object that will be merged with defaults.
          */
-        this.options = input(defaultOptions, { ...(ngDevMode ? { debugName: "options" } : {}), transform: mergeInputs(defaultOptions), alias: 'stats' });
+        this.options = input(defaultOptions, { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), transform: mergeInputs(defaultOptions), alias: 'stats' });
         const statsOptions = omit(this.options, ['parent', 'domClass']);
         const parent = pick(this.options, 'parent');
         const domClass = pick(this.options, 'domClass');
@@ -52,7 +52,7 @@ class NgtsStats {
             const stats = new Stats({ ...untracked(statsOptions) });
             void stats.init(gl);
             return stats;
-        }, ...(ngDevMode ? [{ debugName: "stats" }] : []));
+        }, ...(ngDevMode ? [{ debugName: "stats" }] : /* istanbul ignore next */ []));
         effect((onCleanup) => {
             const _stats = stats();
             if (!_stats)
@@ -72,10 +72,10 @@ class NgtsStats {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgtsStats, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", type: NgtsStats, isStandalone: true, selector: "ngt-canvas[stats]", inputs: { options: { classPropertyName: "options", publicName: "stats", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtsStats, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: NgtsStats, isStandalone: true, selector: "ngt-canvas[stats]", inputs: { options: { classPropertyName: "options", publicName: "stats", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: NgtsStats, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NgtsStats, decorators: [{
             type: Directive,
             args: [{ selector: 'ngt-canvas[stats]' }]
         }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "stats", required: false }] }] } });

package/fesm2022/angular-three-soba-stats.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"angular-three-soba-stats.mjs","sources":["../../../../libs/soba/stats/src/lib/stats.ts","../../../../libs/soba/stats/src/angular-three-soba-stats.ts"],"sourcesContent":["import { computed, Directive, DOCUMENT, effect, ElementRef, inject, input, untracked } from '@angular/core';\nimport { addAfterEffect, injectStore, omit, pick, resolveRef } from 'angular-three';\nimport { mergeInputs } from 'ngxtension/inject-inputs';\nimport Stats from 'stats-gl';\n\n/**\n * Configuration options for the NgtsStats directive.\n *\n * Extends all properties from the stats-gl Stats class with additional\n * Angular-specific options for DOM placement and styling.\n */\nexport type NgtsStatsOptions = Partial<Stats> & {\n\t/**\n\t * The panel index to display by default.\n\t * - 0: FPS (Frames per Second)\n\t * - 1: MS (Milliseconds per frame)\n\t * - 2: MB (Memory usage)\n\t */\n\tshowPanel?: number;\n\t/**\n\t * CSS class(es) to apply to the stats DOM element.\n\t * Multiple classes can be separated by spaces.\n\t * @default ''\n\t */\n\tdomClass: string;\n\t/**\n\t * The parent element to attach the stats panel to.\n\t * If not provided, the stats panel will be appended to document.body.\n\t * @default null\n\t */\n\tparent: ElementRef<HTMLElement> | HTMLElement | null | undefined;\n};\n\nconst defaultOptions: NgtsStatsOptions = {\n\tdomClass: '',\n\tparent: null,\n};\n\n/**\n * A directive that displays performance statistics (FPS, MS, MB) for the Three.js renderer.\n *\n * This directive uses stats-gl to show real-time performance metrics for your 3D scene.\n * It automatically attaches to the canvas and updates every frame.\n *\n * @example\n * Basic usage:\n * ```html\n * <ngt-canvas [stats]=\"true\" />\n * ```\n *\n * @example\n * With custom options:\n * ```html\n * <ngt-canvas [stats]=\"{ domClass: 'my-stats', showPanel: 0 }\" />\n * ```\n *\n * @example\n * Attached to a custom parent element:\n * ```html\n * <div #statsContainer></div>\n * <ngt-canvas [stats]=\"{ parent: statsContainer }\" />\n * ```\n */\n@Directive({ selector: 'ngt-canvas[stats]' })\nexport class NgtsStats {\n\t/**\n\t * Configuration options for the stats panel.\n\t * Accepts a partial NgtsStatsOptions object that will be merged with defaults.\n\t */\n\toptions = input(defaultOptions, { transform: mergeInputs(defaultOptions), alias: 'stats' });\n\n\tconstructor() {\n\t\tconst statsOptions = omit(this.options, ['parent', 'domClass']);\n\t\tconst parent = pick(this.options, 'parent');\n\t\tconst domClass = pick(this.options, 'domClass');\n\n\t\tconst document = inject(DOCUMENT);\n\t\tconst store = injectStore();\n\n\t\tconst stats = computed(() => {\n\t\t\tconst gl = store.gl();\n\t\t\tif (!gl) return null;\n\n\t\t\tconst stats = new Stats({ ...untracked(statsOptions) });\n\t\t\tvoid stats.init(gl);\n\t\t\treturn stats;\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst _stats = stats();\n\t\t\tif (!_stats) return;\n\n\t\t\tconst [_parent, _domClass] = [resolveRef(parent()), domClass()];\n\t\t\tconst target = _parent ?? document.body;\n\t\t\ttarget.appendChild(_stats.dom);\n\t\t\tconst classList = _domClass.split(' ').filter(Boolean);\n\t\t\tif (classList.length) _stats.dom.classList.add(...classList);\n\t\t\tconst end = addAfterEffect(() => _stats.update());\n\n\t\t\tonCleanup(() => {\n\t\t\t\tif (classList.length) _stats.dom.classList.remove(...classList);\n\t\t\t\ttarget.removeChild(_stats.dom);\n\t\t\t\tend();\n\t\t\t});\n\t\t});\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"angular-three-soba-stats.mjs","sources":["../../../../libs/soba/stats/src/lib/stats.ts","../../../../libs/soba/stats/src/angular-three-soba-stats.ts"],"sourcesContent":["import { computed, Directive, DOCUMENT, effect, ElementRef, inject, input, untracked } from '@angular/core';\nimport { addAfterEffect, injectStore, omit, pick, resolveRef } from 'angular-three';\nimport { mergeInputs } from 'ngxtension/inject-inputs';\nimport Stats from 'stats-gl';\n\n/**\n * Configuration options for the NgtsStats directive.\n *\n * Extends all properties from the stats-gl Stats class with additional\n * Angular-specific options for DOM placement and styling.\n */\nexport type NgtsStatsOptions = Partial<Stats> & {\n\t/**\n\t * The panel index to display by default.\n\t * - 0: FPS (Frames per Second)\n\t * - 1: MS (Milliseconds per frame)\n\t * - 2: MB (Memory usage)\n\t */\n\tshowPanel?: number;\n\t/**\n\t * CSS class(es) to apply to the stats DOM element.\n\t * Multiple classes can be separated by spaces.\n\t * @default ''\n\t */\n\tdomClass: string;\n\t/**\n\t * The parent element to attach the stats panel to.\n\t * If not provided, the stats panel will be appended to document.body.\n\t * @default null\n\t */\n\tparent: ElementRef<HTMLElement> | HTMLElement | null | undefined;\n};\n\nconst defaultOptions: NgtsStatsOptions = {\n\tdomClass: '',\n\tparent: null,\n};\n\n/**\n * A directive that displays performance statistics (FPS, MS, MB) for the Three.js renderer.\n *\n * This directive uses stats-gl to show real-time performance metrics for your 3D scene.\n * It automatically attaches to the canvas and updates every frame.\n *\n * @example\n * Basic usage:\n * ```html\n * <ngt-canvas [stats]=\"true\" />\n * ```\n *\n * @example\n * With custom options:\n * ```html\n * <ngt-canvas [stats]=\"{ domClass: 'my-stats', showPanel: 0 }\" />\n * ```\n *\n * @example\n * Attached to a custom parent element:\n * ```html\n * <div #statsContainer></div>\n * <ngt-canvas [stats]=\"{ parent: statsContainer }\" />\n * ```\n */\n@Directive({ selector: 'ngt-canvas[stats]' })\nexport class NgtsStats {\n\t/**\n\t * Configuration options for the stats panel.\n\t * Accepts a partial NgtsStatsOptions object that will be merged with defaults.\n\t */\n\toptions = input(defaultOptions, { transform: mergeInputs(defaultOptions), alias: 'stats' });\n\n\tconstructor() {\n\t\tconst statsOptions = omit(this.options, ['parent', 'domClass']);\n\t\tconst parent = pick(this.options, 'parent');\n\t\tconst domClass = pick(this.options, 'domClass');\n\n\t\tconst document = inject(DOCUMENT);\n\t\tconst store = injectStore();\n\n\t\tconst stats = computed(() => {\n\t\t\tconst gl = store.gl();\n\t\t\tif (!gl) return null;\n\n\t\t\tconst stats = new Stats({ ...untracked(statsOptions) });\n\t\t\tvoid stats.init(gl);\n\t\t\treturn stats;\n\t\t});\n\n\t\teffect((onCleanup) => {\n\t\t\tconst _stats = stats();\n\t\t\tif (!_stats) return;\n\n\t\t\tconst [_parent, _domClass] = [resolveRef(parent()), domClass()];\n\t\t\tconst target = _parent ?? document.body;\n\t\t\ttarget.appendChild(_stats.dom);\n\t\t\tconst classList = _domClass.split(' ').filter(Boolean);\n\t\t\tif (classList.length) _stats.dom.classList.add(...classList);\n\t\t\tconst end = addAfterEffect(() => _stats.update());\n\n\t\t\tonCleanup(() => {\n\t\t\t\tif (classList.length) _stats.dom.classList.remove(...classList);\n\t\t\t\ttarget.removeChild(_stats.dom);\n\t\t\t\tend();\n\t\t\t});\n\t\t});\n\t}\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AAiCA,MAAM,cAAc,GAAqB;AACxC,IAAA,QAAQ,EAAE,EAAE;AACZ,IAAA,MAAM,EAAE,IAAI;CACZ;AAED;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;MAEU,SAAS,CAAA;AAOrB,IAAA,WAAA,GAAA;AANA;;;AAGG;AACH,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAC,cAAc,EAAA,EAAA,IAAA,SAAA,GAAA,EAAA,SAAA,EAAA,SAAA,EAAA,8BAAA,EAAA,CAAA,EAAI,SAAS,EAAE,WAAW,CAAC,cAAc,CAAC,EAAE,KAAK,EAAE,OAAO,GAAG;AAG1F,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAC/D,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,UAAU,CAAC;AAE/C,QAAA,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAC;AACjC,QAAA,MAAM,KAAK,GAAG,WAAW,EAAE;AAE3B,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAK;AAC3B,YAAA,MAAM,EAAE,GAAG,KAAK,CAAC,EAAE,EAAE;AACrB,YAAA,IAAI,CAAC,EAAE;AAAE,gBAAA,OAAO,IAAI;AAEpB,YAAA,MAAM,KAAK,GAAG,IAAI,KAAK,CAAC,EAAE,GAAG,SAAS,CAAC,YAAY,CAAC,EAAE,CAAC;AACvD,YAAA,KAAK,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;AACnB,YAAA,OAAO,KAAK;AACb,QAAA,CAAC,4EAAC;AAEF,QAAA,MAAM,CAAC,CAAC,SAAS,KAAI;AACpB,YAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,YAAA,IAAI,CAAC,MAAM;gBAAE;AAEb,YAAA,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC;AAC/D,YAAA,MAAM,MAAM,GAAG,OAAO,IAAI,QAAQ,CAAC,IAAI;AACvC,YAAA,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC;AAC9B,YAAA,MAAM,SAAS,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC;YACtD,IAAI,SAAS,CAAC,MAAM;gBAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC;AAC5D,YAAA,MAAM,GAAG,GAAG,cAAc,CAAC,MAAM,MAAM,CAAC,MAAM,EAAE,CAAC;YAEjD,SAAS,CAAC,MAAK;gBACd,IAAI,SAAS,CAAC,MAAM;oBAAE,MAAM,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAC/D,gBAAA,MAAM,CAAC,WAAW,CAAC,MAAM,CAAC,GAAG,CAAC;AAC9B,gBAAA,GAAG,EAAE;AACN,YAAA,CAAC,CAAC;AACH,QAAA,CAAC,CAAC;IACH;8GAzCY,SAAS,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAT,SAAS,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA,CAAA;;2FAAT,SAAS,EAAA,UAAA,EAAA,CAAA;kBADrB,SAAS;mBAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE;;;AC/D5C;;AAEG;;;;"}

package/package.json

@@ -1,142 +1,143 @@
 {
-  "name": "angular-three-soba",
-  "version": "4.2.0",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/angular-threejs/angular-three/tree/main/libs/soba"
-  },
-  "author": {
-    "name": "Chau Tran",
-    "email": "nartc7789@gmail.com",
-    "url": "https://nartc.me"
-  },
-  "description": "Utilities for Angular Three",
-  "keywords": [
-    "angular",
-    "threejs",
-    "renderer",
-    "utilities",
-    "shaders"
-  ],
-  "license": "MIT",
-  "exports": {
-    "./assets/*": "./assets/*",
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./types/angular-three-soba.d.ts",
-      "default": "./fesm2022/angular-three-soba.mjs"
-    },
-    "./abstractions": {
-      "types": "./types/angular-three-soba-abstractions.d.ts",
-      "default": "./fesm2022/angular-three-soba-abstractions.mjs"
-    },
-    "./cameras": {
-      "types": "./types/angular-three-soba-cameras.d.ts",
-      "default": "./fesm2022/angular-three-soba-cameras.mjs"
-    },
-    "./controls": {
-      "types": "./types/angular-three-soba-controls.d.ts",
-      "default": "./fesm2022/angular-three-soba-controls.mjs"
-    },
-    "./gizmos": {
-      "types": "./types/angular-three-soba-gizmos.d.ts",
-      "default": "./fesm2022/angular-three-soba-gizmos.mjs"
-    },
-    "./loaders": {
-      "types": "./types/angular-three-soba-loaders.d.ts",
-      "default": "./fesm2022/angular-three-soba-loaders.mjs"
-    },
-    "./materials": {
-      "types": "./types/angular-three-soba-materials.d.ts",
-      "default": "./fesm2022/angular-three-soba-materials.mjs"
-    },
-    "./misc": {
-      "types": "./types/angular-three-soba-misc.d.ts",
-      "default": "./fesm2022/angular-three-soba-misc.mjs"
-    },
-    "./performances": {
-      "types": "./types/angular-three-soba-performances.d.ts",
-      "default": "./fesm2022/angular-three-soba-performances.mjs"
-    },
-    "./shaders": {
-      "types": "./types/angular-three-soba-shaders.d.ts",
-      "default": "./fesm2022/angular-three-soba-shaders.mjs"
-    },
-    "./staging": {
-      "types": "./types/angular-three-soba-staging.d.ts",
-      "default": "./fesm2022/angular-three-soba-staging.mjs"
-    },
-    "./stats": {
-      "types": "./types/angular-three-soba-stats.d.ts",
-      "default": "./fesm2022/angular-three-soba-stats.mjs"
-    },
-    "./vanilla-exports": {
-      "types": "./types/angular-three-soba-vanilla-exports.d.ts",
-      "default": "./fesm2022/angular-three-soba-vanilla-exports.mjs"
-    }
-  },
-  "peerDependencies": {
-    "@angular/common": ">=20.0.0 <22.0.0",
-    "@angular/core": ">=20.0.0 <22.0.0",
-    "@monogrid/gainmap-js": "^3.0.0",
-    "@pmndrs/vanilla": "^1.24.0",
-    "camera-controls": "^2.8.0",
-    "hls.js": ">=1.5.0",
-    "maath": ">=0.10.0 <0.11.0",
-    "meshline": "^3.1.0",
-    "stats-gl": ">=2.0.0",
-    "three": ">=0.157.0 <0.183.0",
-    "three-custom-shader-material": ">=5.5.0 <6.5.0",
-    "three-mesh-bvh": ">=0.5.0 <0.10.0",
-    "three-stdlib": "^2.0.0",
-    "troika-three-text": ">=0.47.0 <0.53.0"
-  },
-  "peerDependenciesMeta": {
-    "@monogrid/gainmap-js": {
-      "optional": true
-    },
-    "@pmndrs/vanilla": {
-      "optional": true
-    },
-    "hls.js": {
-      "optional": true
-    },
-    "troika-three-text": {
-      "optional": true
-    },
-    "three-custom-shader-material": {
-      "optional": true
-    },
-    "three-mesh-bvh": {
-      "optional": true
-    },
-    "maath": {
-      "optional": true
-    },
-    "meshline": {
-      "optional": true
-    },
-    "camera-controls": {
-      "optional": true
-    },
-    "stats-gl": {
-      "optional": true
-    }
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "web-types": [
-    "../../node_modules/angular-three/web-types.json",
-    "../../node_modules/angular-three-soba/web-types.json",
-    "./web-types.json"
-  ],
-  "module": "fesm2022/angular-three-soba.mjs",
-  "typings": "types/angular-three-soba.d.ts"
+	"name": "angular-three-soba",
+	"version": "4.2.2",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/angular-threejs/angular-three/tree/main/libs/soba"
+	},
+	"author": {
+		"name": "Chau Tran",
+		"email": "nartc7789@gmail.com",
+		"url": "https://nartc.me"
+	},
+	"description": "Utilities for Angular Three",
+	"keywords": [
+		"angular",
+		"threejs",
+		"renderer",
+		"utilities",
+		"shaders"
+	],
+	"license": "MIT",
+	"exports": {
+		"./assets/*": "./assets/*",
+		"./package.json": {
+			"default": "./package.json"
+		},
+		".": {
+			"types": "./types/angular-three-soba.d.ts",
+			"default": "./fesm2022/angular-three-soba.mjs"
+		},
+		"./abstractions": {
+			"types": "./types/angular-three-soba-abstractions.d.ts",
+			"default": "./fesm2022/angular-three-soba-abstractions.mjs"
+		},
+		"./cameras": {
+			"types": "./types/angular-three-soba-cameras.d.ts",
+			"default": "./fesm2022/angular-three-soba-cameras.mjs"
+		},
+		"./controls": {
+			"types": "./types/angular-three-soba-controls.d.ts",
+			"default": "./fesm2022/angular-three-soba-controls.mjs"
+		},
+		"./gizmos": {
+			"types": "./types/angular-three-soba-gizmos.d.ts",
+			"default": "./fesm2022/angular-three-soba-gizmos.mjs"
+		},
+		"./loaders": {
+			"types": "./types/angular-three-soba-loaders.d.ts",
+			"default": "./fesm2022/angular-three-soba-loaders.mjs"
+		},
+		"./materials": {
+			"types": "./types/angular-three-soba-materials.d.ts",
+			"default": "./fesm2022/angular-three-soba-materials.mjs"
+		},
+		"./misc": {
+			"types": "./types/angular-three-soba-misc.d.ts",
+			"default": "./fesm2022/angular-three-soba-misc.mjs"
+		},
+		"./performances": {
+			"types": "./types/angular-three-soba-performances.d.ts",
+			"default": "./fesm2022/angular-three-soba-performances.mjs"
+		},
+		"./shaders": {
+			"types": "./types/angular-three-soba-shaders.d.ts",
+			"default": "./fesm2022/angular-three-soba-shaders.mjs"
+		},
+		"./staging": {
+			"types": "./types/angular-three-soba-staging.d.ts",
+			"default": "./fesm2022/angular-three-soba-staging.mjs"
+		},
+		"./stats": {
+			"types": "./types/angular-three-soba-stats.d.ts",
+			"default": "./fesm2022/angular-three-soba-stats.mjs"
+		},
+		"./vanilla-exports": {
+			"types": "./types/angular-three-soba-vanilla-exports.d.ts",
+			"default": "./fesm2022/angular-three-soba-vanilla-exports.mjs"
+		}
+	},
+	"peerDependencies": {
+		"@angular/common": ">=20.0.0 <22.0.0",
+		"@angular/core": ">=20.0.0 <22.0.0",
+		"@monogrid/gainmap-js": "^3.0.0",
+		"@pmndrs/vanilla": "^1.24.0",
+		"camera-controls": "^2.8.0",
+		"hls.js": ">=1.5.0",
+		"maath": ">=0.10.0 <0.11.0",
+		"meshline": "^3.1.0",
+		"stats-gl": ">=2.0.0",
+		"three": ">=0.157.0 <0.183.0",
+		"three-custom-shader-material": ">=5.5.0 <6.5.0",
+		"three-mesh-bvh": ">=0.5.0 <0.10.0",
+		"three-stdlib": "^2.0.0",
+		"troika-three-text": ">=0.47.0 <0.53.0"
+	},
+	"peerDependenciesMeta": {
+		"@monogrid/gainmap-js": {
+			"optional": true
+		},
+		"@pmndrs/vanilla": {
+			"optional": true
+		},
+		"hls.js": {
+			"optional": true
+		},
+		"troika-three-text": {
+			"optional": true
+		},
+		"three-custom-shader-material": {
+			"optional": true
+		},
+		"three-mesh-bvh": {
+			"optional": true
+		},
+		"maath": {
+			"optional": true
+		},
+		"meshline": {
+			"optional": true
+		},
+		"camera-controls": {
+			"optional": true
+		},
+		"stats-gl": {
+			"optional": true
+		}
+	},
+	"dependencies": {
+		"tslib": "^2.3.0"
+	},
+	"sideEffects": false,
+	"web-types": [
+		"../../node_modules/angular-three/web-types.json",
+		"../../node_modules/angular-three-soba/web-types.json",
+		"./web-types.json"
+	],
+	"module": "fesm2022/angular-three-soba.mjs",
+	"typings": "types/angular-three-soba.d.ts",
+	"type": "module"
 }

package/performances/README.md

@@ -16,6 +16,7 @@ npm install three-mesh-bvh
 - [NgtsAdaptiveEvents](#ngtsadaptiveevents)
 - [NgtsBVH](#ngtsbvh)
 - [NgtsDetailed](#ngtsdetailed)
+- [NgtsLOD](#ngtslod)
 - [NgtsInstances](#ngtsinstances)
 - [NgtsSegments](#ngtssegments)
 - [NgtsPoints](#ngtspoints)
@@ -94,6 +95,52 @@ Implements Level of Detail (LOD) rendering. Automatically switches between diffe
 </ngts-detailed>
 ```
 
+## NgtsLOD
+
+Implements Level of Detail (LOD) rendering. Automatically switches between different detail levels of child objects based on camera distance.
+
+Unlike `NgtsDetailed`, this is an implementation based on Angular and angular-three APIs rather than Three's LOD class.
+The component adds and remove objects from the scene graph rather than hiding them with `visible = false`.
+This solves a number of issues such as avoid raycasting over hidden objects.
+
+Usage:
+
+```html
+<ngt-group lod [maxDistance]="10000">
+	<ngt-mesh *lodLevel />
+	<ngt-mesh *lodLevel="{distance: 100, hysteresis: 0.1}" />
+	<ngt-mesh *lodLevel="{distance: 1000}" />
+</ngt-group>
+```
+
+The `[lod]` directive (`NgtsLODImpl`) supports the following optional input:
+
+| Property      | Description                                                                   | Default Value |
+| ------------- | ----------------------------------------------------------------------------- | ------------- |
+| `maxDistance` | Distance beyond which nothing is displayed (equivalent to a last empty level) | `undefined`   |
+
+The `[lodLevel]` directive (`NgtsLODLevel`) supports the following object inputs:
+
+| Property     | Description                                          | Default Value |
+| ------------ | ---------------------------------------------------- | ------------- |
+| `distance`   | Distance threshold above which to display the object | `0`           |
+| `hysteresis` | Prevents rapid switching near distance thresholds    | `0`           |
+
+This directive may also be used with the following shorthand syntax:
+
+```html
+<ngt-group lod>
+	<ng-template lodLevel>
+		<ngt-mesh />
+		<ngt-mesh />
+	</ng-template>
+	<ng-template [lodLevel]="{distance: 100}">
+		<ngt-mesh />
+		<ngt-mesh />
+	</ng-template>
+</ngt-group>
+```
+
 ## NgtsInstances
 
 Efficiently renders many instances of the same geometry and material using a single draw call via `THREE.InstancedMesh`.