angular-three-soba 3.6.1 → 4.0.0-next.1

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { computed, isSignal, signal, effect, untracked, Directive, input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, DestroyRef, TemplateRef, ViewContainerRef, output, Renderer2, model, ElementRef } from '@angular/core';
-import { injectBeforeRender, resolveRef, injectStore, getLocalState, NgtArgs, omit, pick, extend, applyProps, is, NgtHTML, addEffect, addAfterEffect, checkUpdate } from 'angular-three';
+import { computed, isSignal, signal, effect, untracked, Directive, input, viewChild, Component, CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, inject, DestroyRef, TemplateRef, ViewContainerRef, output, ElementRef, Renderer2, model } from '@angular/core';
+import { injectBeforeRender, resolveRef, injectStore, getInstanceState, NgtArgs, omit, pick, extend, is, applyProps, NgtHTML, addEffect, addAfterEffect, checkUpdate } from 'angular-three';
 import { assertInjector } from 'ngxtension/assert-injector';
-import { AnimationMixer, BufferAttribute, REVISION, Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper, Vector3, Euler, Object3D, WebGLRenderTarget, LinearFilter, HalfFloatType, DepthTexture, FloatType, DepthFormat, UnsignedShortType, DoubleSide, Group, PlaneGeometry, ShaderMaterial, Vector2, OrthographicCamera, PerspectiveCamera, WebGLCubeRenderTarget, CubeCamera, InstancedBufferAttribute, Color } from 'three';
+import * as THREE from 'three';
+import { REVISION, Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper, Group, PlaneGeometry, ShaderMaterial } from 'three';
 import { mergeInputs } from 'ngxtension/inject-inputs';
 import { DecalGeometry, MeshSurfaceSampler } from 'three-stdlib';
 import { NgTemplateOutlet } from '@angular/common';
@@ -12,7 +13,7 @@ import { NgTemplateOutlet } from '@angular/common';
  */
 function injectAnimations(animations, object, { injector } = {}) {
     return assertInjector(injectAnimations, injector, () => {
-        const mixer = new AnimationMixer(null);
+        const mixer = new THREE.AnimationMixer(null);
         injectBeforeRender(({ delta }) => {
             if (!mixer.getRoot())
                 return;
@@ -77,13 +78,12 @@ function injectAnimations(animations, object, { injector } = {}) {
 class NgtsBakeShadows {
     constructor() {
         const store = injectStore();
-        const gl = store.select('gl');
         effect((onCleanup) => {
-            const _gl = gl();
-            _gl.shadowMap.autoUpdate = false;
-            _gl.shadowMap.needsUpdate = true;
+            const gl = store.gl();
+            gl.shadowMap.autoUpdate = false;
+            gl.shadowMap.needsUpdate = true;
             onCleanup(() => {
-                _gl.shadowMap.autoUpdate = _gl.shadowMap.needsUpdate = true;
+                gl.shadowMap.autoUpdate = gl.shadowMap.needsUpdate = true;
             });
         });
     }
@@ -105,16 +105,16 @@ class NgtsComputedAttribute {
         this.compute = input.required();
         this.name = input.required();
         this.options = input({});
-        this.bufferAttribute = new BufferAttribute(new Float32Array(0), 1);
+        this.bufferAttribute = new THREE.BufferAttribute(new Float32Array(0), 1);
         this.attributeRef = viewChild('attribute');
         effect(() => {
             const bufferAttribute = this.attributeRef()?.nativeElement;
             if (!bufferAttribute)
                 return;
-            const localState = getLocalState(bufferAttribute);
-            if (!localState)
+            const instanceState = getInstanceState(bufferAttribute);
+            if (!instanceState)
                 return;
-            const geometry = bufferAttribute.parent ?? localState.parent();
+            const geometry = bufferAttribute.parent ?? instanceState.parent();
             const attribute = this.compute()(geometry);
             bufferAttribute.copy(attribute);
         });
@@ -175,20 +175,20 @@ class NgtsDecal {
         extend({ Mesh, BoxGeometry, MeshNormalMaterial, AxesHelper });
         effect((onCleanup) => {
             const thisMesh = this.meshRef().nativeElement;
-            const localState = getLocalState(thisMesh);
-            if (!localState)
+            const instanceState = getInstanceState(thisMesh);
+            if (!instanceState)
                 return;
-            const parent = resolveRef(this.mesh()) || localState.parent();
-            if (parent && !parent.isMesh) {
+            const parent = resolveRef(this.mesh()) || instanceState.parent();
+            if (parent && !is.three(parent, 'isMesh')) {
                 throw new Error('<ngts-decal> must have a Mesh as parent or specify its "mesh" input');
             }
             if (!parent)
                 return;
-            const parentLocalState = getLocalState(parent);
-            if (!parentLocalState)
+            const parentInstanceState = getInstanceState(parent);
+            if (!parentInstanceState)
                 return;
             // track parent's children
-            const parentNonObjects = parentLocalState.nonObjects();
+            const parentNonObjects = parentInstanceState.nonObjects();
             if (!parentNonObjects || !parentNonObjects.length) {
                 return;
             }
@@ -197,18 +197,18 @@ class NgtsDecal {
                 return;
             }
             const [position, rotation, scale] = [this.position(), this.rotation(), this.scale()];
-            const state = { position: new Vector3(), rotation: new Euler(), scale: new Vector3(1, 1, 1) };
+            const state = { position: new THREE.Vector3(), rotation: new THREE.Euler(), scale: new THREE.Vector3(1, 1, 1) };
             applyProps(state, { position, scale });
             // zero out the parents matrix world for this operation
             const matrixWorld = parent.matrixWorld.clone();
             parent.matrixWorld.identity();
             if (!rotation || typeof rotation === 'number') {
-                const o = new Object3D();
-                o.position.copy(state.position);
-                o.lookAt(parent.position);
+                const obj = new THREE.Object3D();
+                obj.position.copy(state.position);
+                obj.lookAt(parent.position);
                 if (typeof rotation === 'number')
-                    o.rotateZ(rotation);
-                applyProps(state, { rotation: o.rotation });
+                    obj.rotateZ(rotation);
+                applyProps(state, { rotation: obj.rotation });
             }
             else {
                 applyProps(state, { rotation });
@@ -243,7 +243,7 @@ class NgtsDecal {
 			@if (debug()) {
 				<ngt-mesh #helper>
 					<ngt-box-geometry />
-					<ngt-mesh-normal-material [wireframe]="true" />
+					<ngt-mesh-normal-material wireframe />
 					<ngt-axes-helper />
 				</ngt-mesh>
 			}
@@ -269,7 +269,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 			@if (debug()) {
 				<ngt-mesh #helper>
 					<ngt-box-geometry />
-					<ngt-mesh-normal-material [wireframe]="true" />
+					<ngt-mesh-normal-material wireframe />
 					<ngt-axes-helper />
 				</ngt-mesh>
 			}
@@ -298,15 +298,13 @@ const sRGBEncoding = 3001;
 function injectFBO(params = () => ({}), { injector } = {}) {
     return assertInjector(injectFBO, injector, () => {
         const store = injectStore();
-        const size = store.select('size');
-        const viewport = store.select('viewport');
         const width = computed(() => {
             const { width } = params();
-            return typeof width === 'number' ? width : size().width * viewport().dpr;
+            return typeof width === 'number' ? width : store.size.width() * store.viewport.dpr();
         });
         const height = computed(() => {
             const { height } = params();
-            return typeof height === 'number' ? height : size().height * viewport().dpr;
+            return typeof height === 'number' ? height : store.size.height() * store.viewport.dpr();
         });
         const settings = computed(() => {
             const { width, settings } = params();
@@ -322,14 +320,14 @@ function injectFBO(params = () => ({}), { injector } = {}) {
                 untracked(width),
                 untracked(height),
             ];
-            const target = new WebGLRenderTarget(_width, _height, {
-                minFilter: LinearFilter,
-                magFilter: LinearFilter,
-                type: HalfFloatType,
+            const target = new THREE.WebGLRenderTarget(_width, _height, {
+                minFilter: THREE.LinearFilter,
+                magFilter: THREE.LinearFilter,
+                type: THREE.HalfFloatType,
                 ...targetSettings,
             });
             if (depth) {
-                target.depthTexture = new DepthTexture(_width, _height, FloatType);
+                target.depthTexture = new THREE.DepthTexture(_width, _height, THREE.FloatType);
             }
             target.samples = samples;
             return target;
@@ -378,15 +376,15 @@ function injectDepthBuffer(params = () => ({}), { injector } = {}) {
         const size = computed(() => params().size || 256);
         const frames = computed(() => params().frames || Infinity);
         const store = injectStore();
-        const width = store.select('size', 'width');
-        const height = store.select('size', 'height');
-        const dpr = store.select('viewport', 'dpr');
-        const w = computed(() => size() || width() * dpr());
-        const h = computed(() => size() || height() * dpr());
+        // const width = store.select('size', 'width');
+        // const height = store.select('size', 'height');
+        // const dpr = store.select('viewport', 'dpr');
+        const w = computed(() => size() || store.size.width() * store.viewport.dpr());
+        const h = computed(() => size() || store.size.height() * store.viewport.dpr());
         const depthConfig = computed(() => {
-            const depthTexture = new DepthTexture(w(), h());
-            depthTexture.format = DepthFormat;
-            depthTexture.type = UnsignedShortType;
+            const depthTexture = new THREE.DepthTexture(w(), h());
+            depthTexture.format = THREE.DepthFormat;
+            depthTexture.type = THREE.UnsignedShortType;
             return { depthTexture };
         });
         const depthFBO = injectFBO(() => ({ width: w(), height: h(), settings: depthConfig() }));
@@ -403,133 +401,10 @@ function injectDepthBuffer(params = () => ({}), { injector } = {}) {
     });
 }
 
-const defaultHtmlOptions = {
-    occlude: false,
-    transform: false,
-    castShadow: false,
-    receiveShadow: false,
-};
-class NgtsHTML {
-    constructor() {
-        this.options = input(defaultHtmlOptions, { transform: mergeInputs(defaultHtmlOptions) });
-        this.parameters = omit(this.options, ['occlude', 'castShadow', 'receiveShadow', 'transform']);
-        this.groupRef = viewChild.required('group');
-        this.occlusionMeshRef = viewChild('occlusionMesh');
-        this.occlusionGeometryRef = viewChild('occlusionGeometry');
-        this.occlude = pick(this.options, 'occlude');
-        this.transform = pick(this.options, 'transform');
-        this.castShadow = pick(this.options, 'castShadow');
-        this.receiveShadow = pick(this.options, 'receiveShadow');
-        this.scale = pick(this.options, 'scale');
-        this.isRaycastOcclusion = computed(() => {
-            const occlude = this.occlude();
-            return (occlude && occlude !== 'blending') || (Array.isArray(occlude) && occlude.length && is.ref(occlude[0]));
-        });
-        this.shaders = computed(() => {
-            const transform = this.transform();
-            const vertexShader = !transform
-                ? /* language=glsl glsl */ `
-          /*
-            This shader is from the THREE's SpriteMaterial.
-            We need to turn the backing plane into a Sprite
-            (make it always face the camera) if "transfrom"
-            is false.
-          */
-          #include <common>
-
-          void main() {
-            vec2 center = vec2(0., 1.);
-            float rotation = 0.0;
-
-            // This is somewhat arbitrary, but it seems to work well
-            // Need to figure out how to derive this dynamically if it even matters
-            float size = 0.03;
-
-            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
-            vec2 scale;
-            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
-            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
-
-            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
-            if ( isPerspective ) scale *= - mvPosition.z;
-
-            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
-            vec2 rotatedPosition;
-            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
-            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
-            mvPosition.xy += rotatedPosition;
-
-            gl_Position = projectionMatrix * mvPosition;
-          }
-      `
-                : undefined;
-            const fragmentShader = /* language=glsl glsl */ `
-      void main() {
-        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
-      }
-    `;
-            return { vertexShader, fragmentShader };
-        });
-        this.vertexShader = pick(this.shaders, 'vertexShader');
-        this.fragmentShader = pick(this.shaders, 'fragmentShader');
-        this.DoubleSide = DoubleSide;
-        extend({ Group, Mesh, PlaneGeometry, ShaderMaterial });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTML, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: NgtsHTML, isStandalone: true, selector: "ngts-html", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "occlusionMeshRef", first: true, predicate: ["occlusionMesh"], descendants: true, isSignal: true }, { propertyName: "occlusionGeometryRef", first: true, predicate: ["occlusionGeometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
-		<ngt-group #group [parameters]="parameters()">
-			@if (occlude() && !isRaycastOcclusion()) {
-				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
-					<ng-content select="[data-occlusion-geometry]">
-						<ngt-plane-geometry #occlusionGeometry />
-					</ng-content>
-					<ng-content select="[data-occlusion-material]">
-						<ngt-shader-material
-							[side]="DoubleSide"
-							[vertexShader]="vertexShader()"
-							[fragmentShader]="fragmentShader()"
-						/>
-					</ng-content>
-				</ngt-mesh>
-			}
-		</ngt-group>
-
-		<ng-content />
-	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTML, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ngts-html',
-                    template: `
-		<ngt-group #group [parameters]="parameters()">
-			@if (occlude() && !isRaycastOcclusion()) {
-				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
-					<ng-content select="[data-occlusion-geometry]">
-						<ngt-plane-geometry #occlusionGeometry />
-					</ng-content>
-					<ng-content select="[data-occlusion-material]">
-						<ngt-shader-material
-							[side]="DoubleSide"
-							[vertexShader]="vertexShader()"
-							[fragmentShader]="fragmentShader()"
-						/>
-					</ng-content>
-				</ngt-mesh>
-			}
-		</ngt-group>
-
-		<ng-content />
-	`,
-                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                }]
-        }], ctorParameters: () => [] });
-
-const v1 = new Vector3();
-const v2 = new Vector3();
-const v3 = new Vector3();
-const v4 = new Vector2();
+const v1 = new THREE.Vector3();
+const v2 = new THREE.Vector3();
+const v3 = new THREE.Vector3();
+const v4 = new THREE.Vector2();
 function defaultCalculatePosition(el, camera, size) {
     const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
     objectPos.project(camera);
@@ -559,9 +434,9 @@ function isObjectVisible(el, camera, raycaster, occlude) {
     return true;
 }
 function objectScale(el, camera) {
-    if (camera instanceof OrthographicCamera)
+    if (is.three(camera, 'isOrthographicCamera'))
         return camera.zoom;
-    if (camera instanceof PerspectiveCamera) {
+    if (is.three(camera, 'isPerspectiveCamera')) {
         const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
         const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
         const vFOV = (camera.fov * Math.PI) / 180;
@@ -572,7 +447,8 @@ function objectScale(el, camera) {
     return 1;
 }
 function objectZIndex(el, camera, zIndexRange) {
-    if (camera instanceof PerspectiveCamera || camera instanceof OrthographicCamera) {
+    if (is.three(camera, 'isPerspectiveCamera') ||
+        is.three(camera, 'isOrthographicCamera')) {
         const objectPos = v1.setFromMatrixPosition(el.matrixWorld);
         const cameraPos = v2.setFromMatrixPosition(camera.matrixWorld);
         const dist = objectPos.distanceTo(cameraPos);
@@ -616,18 +492,16 @@ class NgtsHTMLContent extends NgtHTML {
         super();
         this.options = input(defaultHtmlContentOptions, {
             transform: mergeInputs(defaultHtmlContentOptions),
-            alias: 'ngtsHTMLContent',
+            alias: 'htmlContent',
         });
         this.occluded = output();
-        this.html = inject(NgtsHTML);
         this.transformOuterRef = viewChild('transformOuter');
         this.transformInnerRef = viewChild('transformInner');
         this.containerRef = viewChild('container');
-        this.gl = this.store.select('gl');
-        this.events = this.store.select('events');
-        this.camera = this.store.select('camera');
-        this.scene = this.store.select('scene');
-        this.size = this.store.select('size');
+        this.html = inject(NgtsHTML);
+        this.host = inject(ElementRef);
+        this.store = injectStore();
+        this.size = this.store.size;
         this.parent = pick(this.options, 'parent');
         this.zIndexRange = pick(this.options, 'zIndexRange');
         this.calculatePosition = pick(this.options, 'calculatePosition');
@@ -641,14 +515,14 @@ class NgtsHTMLContent extends NgtHTML {
             const parent = resolveRef(this.parent());
             if (parent)
                 return parent;
-            return (this.events().connected || this.gl().domElement.parentNode);
+            return (this.store.events.connected?.() || this.store.gl.domElement.parentNode());
         });
         const renderer = inject(Renderer2);
         let isMeshSizeSet = false;
         effect(() => {
             const [occlude, canvasEl, zIndexRange] = [
                 this.html.occlude(),
-                untracked(this.gl).domElement,
+                this.store.snapshot.gl.domElement,
                 untracked(this.zIndexRange),
             ];
             if (occlude && occlude === 'blending') {
@@ -668,11 +542,11 @@ class NgtsHTMLContent extends NgtHTML {
                 this.target(),
                 this.host.nativeElement,
                 untracked(this.prepend),
-                untracked(this.scene),
+                this.store.snapshot.scene,
                 untracked(this.calculatePosition),
                 untracked(this.html.groupRef).nativeElement,
-                untracked(this.size),
-                untracked(this.camera),
+                this.store.snapshot.size,
+                this.store.snapshot.camera,
             ];
             scene.updateMatrixWorld();
             renderer.setStyle(hostEl, 'position', 'absolute');
@@ -800,7 +674,7 @@ class NgtsHTMLContent extends NgtHTML {
                                     if (!Array.isArray(scale)) {
                                         occlusionMesh.scale.setScalar(1 / scale);
                                     }
-                                    else if (scale instanceof Vector3) {
+                                    else if (is.three(scale, 'isVector3')) {
                                         occlusionMesh.scale.copy(scale.clone().divideScalar(1));
                                     }
                                     else {
@@ -833,7 +707,7 @@ class NgtsHTMLContent extends NgtHTML {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTMLContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: NgtsHTMLContent, isStandalone: true, selector: "[ngtsHTMLContent]", inputs: { options: { classPropertyName: "options", publicName: "ngtsHTMLContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { occluded: "occluded" }, host: { attributes: { "data-ngts-html-content": "" } }, viewQueries: [{ propertyName: "transformOuterRef", first: true, predicate: ["transformOuter"], descendants: true, isSignal: true }, { propertyName: "transformInnerRef", first: true, predicate: ["transformInner"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: NgtsHTMLContent, isStandalone: true, selector: "div[htmlContent]", inputs: { options: { classPropertyName: "options", publicName: "htmlContent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { occluded: "occluded" }, host: { attributes: { "data-ngts-html-content": "" } }, viewQueries: [{ propertyName: "transformOuterRef", first: true, predicate: ["transformOuter"], descendants: true, isSignal: true }, { propertyName: "transformInnerRef", first: true, predicate: ["transformInner"], descendants: true, isSignal: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
 		@if (html.transform()) {
 			<div
 				#transformOuter
@@ -852,10 +726,10 @@ class NgtsHTMLContent extends NgtHTML {
 				#container
 				style="position:absolute"
 				[style.transform]="center() ? 'translate3d(-50%,-50%,0)' : 'none'"
-				[style.top]="fullscreen() ? -size().height / 2 + 'px' : 'unset'"
-				[style.left]="fullscreen() ? -size().width / 2 + 'px' : 'unset'"
-				[style.width]="fullscreen() ? size().width : 'unset'"
-				[style.height]="fullscreen() ? size().height : 'unset'"
+				[style.top]="fullscreen() ? -size.height() / 2 + 'px' : 'unset'"
+				[style.left]="fullscreen() ? -size.width() / 2 + 'px' : 'unset'"
+				[style.width]="fullscreen() ? size.width() : 'unset'"
+				[style.height]="fullscreen() ? size.height() : 'unset'"
 				[class]="containerClass()"
 				[style]="containerStyle()"
 			>
@@ -871,7 +745,7 @@ class NgtsHTMLContent extends NgtHTML {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTMLContent, decorators: [{
             type: Component,
             args: [{
-                    selector: '[ngtsHTMLContent]',
+                    selector: 'div[htmlContent]',
                     template: `
 		@if (html.transform()) {
 			<div
@@ -891,10 +765,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 				#container
 				style="position:absolute"
 				[style.transform]="center() ? 'translate3d(-50%,-50%,0)' : 'none'"
-				[style.top]="fullscreen() ? -size().height / 2 + 'px' : 'unset'"
-				[style.left]="fullscreen() ? -size().width / 2 + 'px' : 'unset'"
-				[style.width]="fullscreen() ? size().width : 'unset'"
-				[style.height]="fullscreen() ? size().height : 'unset'"
+				[style.top]="fullscreen() ? -size.height() / 2 + 'px' : 'unset'"
+				[style.left]="fullscreen() ? -size.width() / 2 + 'px' : 'unset'"
+				[style.width]="fullscreen() ? size.width() : 'unset'"
+				[style.height]="fullscreen() ? size.height() : 'unset'"
 				[class]="containerClass()"
 				[style]="containerStyle()"
 			>
@@ -912,6 +786,129 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+const defaultHtmlOptions = {
+    occlude: false,
+    transform: false,
+    castShadow: false,
+    receiveShadow: false,
+};
+class NgtsHTML {
+    constructor() {
+        this.options = input(defaultHtmlOptions, { transform: mergeInputs(defaultHtmlOptions) });
+        this.parameters = omit(this.options, ['occlude', 'castShadow', 'receiveShadow', 'transform']);
+        this.groupRef = viewChild.required('group');
+        this.occlusionMeshRef = viewChild('occlusionMesh');
+        this.occlusionGeometryRef = viewChild('occlusionGeometry');
+        this.castShadow = pick(this.options, 'castShadow');
+        this.receiveShadow = pick(this.options, 'receiveShadow');
+        this.occlude = pick(this.options, 'occlude');
+        this.transform = pick(this.options, 'transform');
+        this.isRaycastOcclusion = computed(() => {
+            const occlude = this.occlude();
+            return (occlude && occlude !== 'blending') || (Array.isArray(occlude) && occlude.length && is.ref(occlude[0]));
+        });
+        this.shaders = computed(() => {
+            const transform = this.transform();
+            const vertexShader = !transform
+                ? /* language=glsl glsl */ `
+          /*
+            This shader is from the THREE's SpriteMaterial.
+            We need to turn the backing plane into a Sprite
+            (make it always face the camera) if "transfrom"
+            is false.
+          */
+          #include <common>
+
+          void main() {
+            vec2 center = vec2(0., 1.);
+            float rotation = 0.0;
+
+            // This is somewhat arbitrary, but it seems to work well
+            // Need to figure out how to derive this dynamically if it even matters
+            float size = 0.03;
+
+            vec4 mvPosition = modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );
+            vec2 scale;
+            scale.x = length( vec3( modelMatrix[ 0 ].x, modelMatrix[ 0 ].y, modelMatrix[ 0 ].z ) );
+            scale.y = length( vec3( modelMatrix[ 1 ].x, modelMatrix[ 1 ].y, modelMatrix[ 1 ].z ) );
+
+            bool isPerspective = isPerspectiveMatrix( projectionMatrix );
+            if ( isPerspective ) scale *= - mvPosition.z;
+
+            vec2 alignedPosition = ( position.xy - ( center - vec2( 0.5 ) ) ) * scale * size;
+            vec2 rotatedPosition;
+            rotatedPosition.x = cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y;
+            rotatedPosition.y = sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y;
+            mvPosition.xy += rotatedPosition;
+
+            gl_Position = projectionMatrix * mvPosition;
+          }
+      `
+                : undefined;
+            const fragmentShader = /* language=glsl glsl */ `
+      void main() {
+        gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0);
+      }
+    `;
+            return { vertexShader, fragmentShader };
+        });
+        this.vertexShader = pick(this.shaders, 'vertexShader');
+        this.fragmentShader = pick(this.shaders, 'fragmentShader');
+        this.DoubleSide = THREE.DoubleSide;
+        extend({ Group, Mesh, PlaneGeometry, ShaderMaterial });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTML, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: NgtsHTML, isStandalone: true, selector: "ngts-html", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "groupRef", first: true, predicate: ["group"], descendants: true, isSignal: true }, { propertyName: "occlusionMeshRef", first: true, predicate: ["occlusionMesh"], descendants: true, isSignal: true }, { propertyName: "occlusionGeometryRef", first: true, predicate: ["occlusionGeometry"], descendants: true, isSignal: true }], ngImport: i0, template: `
+		<ngt-group #group [parameters]="parameters()">
+			@if (occlude() && !isRaycastOcclusion()) {
+				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
+					<ng-content select="[data-occlusion-geometry]">
+						<ngt-plane-geometry #occlusionGeometry />
+					</ng-content>
+					<ng-content select="[data-occlusion-material]">
+						<ngt-shader-material
+							[side]="DoubleSide"
+							[vertexShader]="vertexShader()"
+							[fragmentShader]="fragmentShader()"
+						/>
+					</ng-content>
+				</ngt-mesh>
+			}
+		</ngt-group>
+
+		<ng-content />
+	`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsHTML, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ngts-html',
+                    template: `
+		<ngt-group #group [parameters]="parameters()">
+			@if (occlude() && !isRaycastOcclusion()) {
+				<ngt-mesh #occlusionMesh [castShadow]="castShadow()" [receiveShadow]="receiveShadow()">
+					<ng-content select="[data-occlusion-geometry]">
+						<ngt-plane-geometry #occlusionGeometry />
+					</ng-content>
+					<ng-content select="[data-occlusion-material]">
+						<ngt-shader-material
+							[side]="DoubleSide"
+							[vertexShader]="vertexShader()"
+							[fragmentShader]="fragmentShader()"
+						/>
+					</ng-content>
+				</ngt-mesh>
+			}
+		</ngt-group>
+
+		<ng-content />
+	`,
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [] });
+const NgtsHTMLDeclarations = [NgtsHTML, NgtsHTMLContent];
+
 function injectIntersect(object, { injector, source = signal(false) } = {}) {
     return assertInjector(injectIntersect, injector, () => {
         let check = false;
@@ -963,24 +960,21 @@ class NgtsPreload {
         this.scene = model();
         this.camera = model();
         this.store = injectStore();
-        this.gl = this.store.select('gl');
-        this.defaultScene = this.store.select('scene');
-        this.defaultCamera = this.store.select('camera');
         this.trueScene = computed(() => {
             const scene = this.scene();
             if (scene)
                 return resolveRef(scene);
-            return this.defaultScene();
+            return this.store.scene();
         });
         this.trueCamera = computed(() => {
             const camera = this.camera();
             if (camera)
                 return resolveRef(camera);
-            return this.defaultCamera();
+            return this.store.camera();
         });
         effect(() => {
             const invisible = [];
-            const [all, scene, camera, gl] = [this.all(), this.trueScene(), this.trueCamera(), this.gl()];
+            const [all, scene, camera, gl] = [this.all(), this.trueScene(), this.trueCamera(), this.store.gl()];
             if (!scene || !camera)
                 return;
             if (all) {
@@ -995,8 +989,8 @@ class NgtsPreload {
             // Now compile the scene
             gl.compile(scene, camera);
             // And for good measure, hit it with a cube camera
-            const cubeRenderTarget = new WebGLCubeRenderTarget(128);
-            const cubeCamera = new CubeCamera(0.01, 100000, cubeRenderTarget);
+            const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(128);
+            const cubeCamera = new THREE.CubeCamera(0.01, 100000, cubeRenderTarget);
             cubeCamera.update(gl, scene);
             cubeRenderTarget.dispose();
             // Flips these objects back
@@ -1011,59 +1005,57 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
             args: [{ selector: 'ngts-preload' }]
         }], ctorParameters: () => [] });
 
-function injectSurfaceSampler(mesh, options = () => ({}), { injector } = {}) {
-    return assertInjector(injectSurfaceSampler, injector, () => {
-        const initialBufferAttribute = (() => {
-            const arr = Array.from({ length: options().count ?? 16 }, () => [
-                1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
-            ]).flat();
-            return new InstancedBufferAttribute(Float32Array.from(arr), 16);
-        })();
-        return computed(() => {
-            const currentMesh = resolveRef(mesh());
-            if (!currentMesh)
-                return initialBufferAttribute;
-            const localState = getLocalState(currentMesh);
-            if (!localState)
-                return initialBufferAttribute;
-            const nonObjects = localState.nonObjects();
-            if (!nonObjects ||
-                !nonObjects.length ||
-                nonObjects.every((nonObject) => !nonObject.isBufferGeometry)) {
-                return initialBufferAttribute;
-            }
-            const sampler = new MeshSurfaceSampler(currentMesh);
-            const { weight, count = 16, transform, instanceMesh } = options();
-            if (weight) {
-                sampler.setWeightAttribute(weight);
+function surfaceSampler(mesh, { count, transform, weight, instancedMesh, } = {}) {
+    const initialBufferAttribute = (() => {
+        const arr = Array.from({ length: count?.() ?? 16 }, () => [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1]).flat();
+        return new THREE.InstancedBufferAttribute(Float32Array.from(arr), 16);
+    })();
+    return computed(() => {
+        const currentMesh = resolveRef(mesh());
+        if (!currentMesh)
+            return initialBufferAttribute;
+        const instanceState = getInstanceState(currentMesh);
+        if (!instanceState)
+            return initialBufferAttribute;
+        const nonObjects = instanceState.nonObjects();
+        if (!nonObjects ||
+            !nonObjects.length ||
+            nonObjects.every((nonObject) => !is.three(nonObject, 'isBufferGeometry'))) {
+            return initialBufferAttribute;
+        }
+        const sampler = new MeshSurfaceSampler(currentMesh);
+        const _count = count?.() ?? 16;
+        const _transform = transform?.();
+        const _weight = weight?.();
+        if (_weight) {
+            sampler.setWeightAttribute(_weight);
+        }
+        sampler.build();
+        const position = new THREE.Vector3();
+        const normal = new THREE.Vector3();
+        const color = new THREE.Color();
+        const dummy = new THREE.Object3D();
+        const instance = resolveRef(instancedMesh?.());
+        currentMesh.updateMatrixWorld(true);
+        for (let i = 0; i < _count; i++) {
+            sampler.sample(position, normal, color);
+            if (typeof _transform === 'function') {
+                _transform({ dummy, sampledMesh: currentMesh, position, normal, color }, i);
             }
-            sampler.build();
-            const position = new Vector3();
-            const normal = new Vector3();
-            const color = new Color();
-            const dummy = new Object3D();
-            const instance = resolveRef(instanceMesh);
-            currentMesh.updateMatrixWorld(true);
-            for (let i = 0; i < count; i++) {
-                sampler.sample(position, normal, color);
-                if (typeof transform === 'function') {
-                    transform({ dummy, sampledMesh: currentMesh, position, normal, color }, i);
-                }
-                else {
-                    dummy.position.copy(position);
-                }
-                dummy.updateMatrix();
-                if (instance) {
-                    instance.setMatrixAt(i, dummy.matrix);
-                }
-                dummy.matrix.toArray(initialBufferAttribute.array, i * 16);
+            else {
+                dummy.position.copy(position);
             }
+            dummy.updateMatrix();
             if (instance) {
-                checkUpdate(instance.instanceMatrix);
+                instance.setMatrixAt(i, dummy.matrix);
             }
-            checkUpdate(initialBufferAttribute);
-            return new InstancedBufferAttribute(initialBufferAttribute.array, initialBufferAttribute.itemSize).copy(initialBufferAttribute);
-        });
+            dummy.matrix.toArray(initialBufferAttribute.array, i * 16);
+        }
+        if (instance) {
+            checkUpdate(instance.instanceMatrix);
+        }
+        checkUpdate(initialBufferAttribute);
+        return new THREE.InstancedBufferAttribute(initialBufferAttribute.array, initialBufferAttribute.itemSize).copy(initialBufferAttribute);
     });
 }
 const defaultOptions = {
@@ -1077,31 +1069,42 @@ class NgtsSampler {
         this.parameters = omit(this.options, ['weight', 'transform', 'count']);
         // NOTE: this could have been a viewChild.required, but we need to _try_ to consume
         //  this Signal earlier than when a viewChild.required would resolve.
-        this.groupRef = viewChild('group');
+        this.groupRef = viewChild.required('group');
+        this.count = pick(this.options, 'count');
+        this.weight = pick(this.options, 'weight');
+        this.transform = pick(this.options, 'transform');
         extend({ Group });
-        const sampleState = computed(() => {
-            const group = this.groupRef()?.nativeElement;
-            const localState = getLocalState(group);
-            if (!localState)
-                return { mesh: null, instanced: null };
-            const [mesh, instances] = [resolveRef(this.mesh()), resolveRef(this.instances())];
-            const objects = localState.objects();
-            return {
-                mesh: mesh ?? objects.find((c) => c.type === 'Mesh'),
-                instanced: instances ?? objects.find((c) => !!Object.getOwnPropertyDescriptor(c, 'instanceMatrix')),
-            };
+        const meshToSample = computed(() => {
+            const group = this.groupRef().nativeElement;
+            const instanceState = getInstanceState(group);
+            if (!instanceState)
+                return null;
+            const mesh = resolveRef(this.mesh());
+            if (mesh)
+                return mesh;
+            const objects = instanceState.objects();
+            return objects.find((c) => is.three(c, 'isMesh'));
+        });
+        const instancedMeshToSample = computed(() => {
+            const group = this.groupRef().nativeElement;
+            const instanceState = getInstanceState(group);
+            if (!instanceState)
+                return null;
+            const instances = resolveRef(this.instances());
+            if (instances)
+                return instances;
+            const objects = instanceState.objects();
+            return objects.find((c) => !!Object.getOwnPropertyDescriptor(c, 'instanceMatrix'));
         });
-        const meshToSample = pick(sampleState, 'mesh');
-        const instancedToSample = pick(sampleState, 'instanced');
         // NOTE: because injectSurfaceSampler returns a computed, we need to consume
         //  this computed in a Reactive Context (an effect) to ensure the inner logic of
         //  injectSurfaceSampler is run properly.
-        const sampler = injectSurfaceSampler(meshToSample, () => ({
-            count: this.options().count,
-            transform: this.options().transform,
-            weight: this.options().weight,
-            instanceMesh: instancedToSample(),
-        }));
+        const sampler = surfaceSampler(meshToSample, {
+            count: this.count,
+            transform: this.transform,
+            weight: this.weight,
+            instancedMesh: instancedMeshToSample,
+        });
         effect(sampler);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: NgtsSampler, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -1125,9 +1128,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
-const tV0 = new Vector3();
-const tV1 = new Vector3();
-const tV2 = new Vector3();
+const tV0 = new THREE.Vector3();
+const tV1 = new THREE.Vector3();
+const tV2 = new THREE.Vector3();
 function getPoint2(point3, camera, size) {
     const widthHalf = size.width / 2;
     const heightHalf = size.height / 2;
@@ -1157,5 +1160,5 @@ function calculateScaleFactor(point3, radiusPx, camera, size) {
  * Generated bundle index. Do not edit.
  */
 
-export { LinearEncoding, NgtsBakeShadows, NgtsComputedAttribute, NgtsDecal, NgtsFBO, NgtsHTML, NgtsHTMLContent, NgtsIntersect, NgtsPreload, NgtsSampler, calculateScaleFactor, getVersion, injectAnimations, injectDepthBuffer, injectFBO, injectIntersect, injectSurfaceSampler, sRGBEncoding, setUpdateRange };
+export { LinearEncoding, NgtsBakeShadows, NgtsComputedAttribute, NgtsDecal, NgtsFBO, NgtsHTML, NgtsHTMLContent, NgtsHTMLDeclarations, NgtsIntersect, NgtsPreload, NgtsSampler, calculateScaleFactor, getVersion, injectAnimations, injectDepthBuffer, injectFBO, injectIntersect, sRGBEncoding, setUpdateRange, surfaceSampler };
 //# sourceMappingURL=angular-three-soba-misc.mjs.map