@needle-tools/engine 4.16.0 → 4.16.1-next.ad85c25

package/src/engine/webcomponents/logo-element.ts

@@ -20,8 +20,13 @@ export class NeedleLogoElement extends HTMLElement {
         return document.createElement(elementName) as NeedleLogoElement;
     }
 
+    private _didInitialize = false;
+
     constructor() {
         super();
+    }
+
+    private initializeDom() {
         this._root = this.attachShadow({ mode: 'closed' });
         const template = document.createElement('template');
         template.innerHTML = `<style>
@@ -83,25 +88,37 @@ export class NeedleLogoElement extends HTMLElement {
         this.addEventListener("click", () => {
             globalThis.open("https://needle.tools", "_blank");
         });
+    }
 
+    private ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
     }
 
     connectedCallback() {
+        this.ensureInitialized();
+        if (!this.wrapper) return;
         this.wrapper.setAttribute("title", "Made with Needle Engine");
         this.setAttribute("aria-label", "Needle Engine logo. Click to open the Needle Engine website.");
     }
 
-    private readonly _root: ShadowRoot;
-    private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement;
+    private _root!: ShadowRoot;
+    private wrapper!: HTMLDivElement;
+    private logoElement!: HTMLImageElement;
 
     /** Show or hide the logo element (used by the menu) */
     setLogoVisible(val: boolean) {
+        this.ensureInitialized();
+        if (!this.logoElement) return;
         this.logoElement.style.display = val ? "block" : "none";
     }
 
     /** Switch the logo between full and compact versions */
     setType(type: "full" | "compact") {
+        this.ensureInitialized();
+        if (!this.logoElement) return;
         if (type === "full") {
             this.logoElement.src = needleLogoSVG;
             this.logoElement.classList.remove("with-text");

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -129,6 +129,7 @@ export class NeedleMenu {
 
     constructor(context: Context) {
         this._menu = NeedleMenuElement.getOrCreate(context.domElement, context);
+        this._menu.ensureInitialized();
         this._context = context;
         this._spatialMenu = new NeedleSpatialMenu(context, this._menu);
         window.addEventListener("message", this.onPostMessage);
@@ -337,9 +338,13 @@ export class NeedleMenuElement extends HTMLElement {
 
     private _domElement: HTMLElement | null = null;
     private _context: Context | null = null;
+    private _didInitialize = false;
 
     constructor() {
         super();
+    }
+
+    private initializeDom() {
 
         const template = document.createElement('template');
         // TODO: make host full size again and move the buttons to a wrapper so that we can later easily open e.g. foldouts/dropdowns / use the whole canvas space
@@ -793,7 +798,7 @@ export class NeedleMenuElement extends HTMLElement {
 
 
         let context = this._context;
-        // we need to assign it in the timeout because the reference is set *after* the constructor did run
+        // we need to assign it in the timeout because the reference is set *after* the element is initialized
         setTimeout(() => context = this._context);
 
         // watch changes
@@ -862,13 +867,21 @@ export class NeedleMenuElement extends HTMLElement {
         }
     }
 
+    ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
+
     private _sizeChangeInterval;
 
     connectedCallback() {
+        this.ensureInitialized();
         window.addEventListener("resize", this.handleSizeChange);
         this.handleMenuVisible();
         this._sizeChangeInterval = setInterval(() => this.handleSizeChange(undefined, false), 5000);
-        // the dom element is set after the constructor runs
+        // the dom element is set after initialization runs
         setTimeout(() => {
             this._domElement?.addEventListener("resize", this.handleSizeChange);
             this._domElement?.addEventListener("click", this.#onClick);
@@ -956,19 +969,19 @@ export class NeedleMenuElement extends HTMLElement {
 
     // private _root: ShadowRoot | null = null;
     /** @private root container element inside shadow DOM */
-    private readonly root: HTMLDivElement;
+    private root!: HTMLDivElement;
     /** @private wraps the whole content (internal layout) */
-    private readonly wrapper: HTMLDivElement;
+    private wrapper!: HTMLDivElement;
     /** @private contains the buttons and dynamic elements */
-    private readonly options: HTMLDivElement;
+    private options!: HTMLDivElement;
     /** @private contains options visible when in compact mode */
-    private readonly optionsCompactMode: HTMLDivElement;
+    private optionsCompactMode!: HTMLDivElement;
     /** @private contains the needle-logo html element */
-    private readonly logoContainer: HTMLDivElement;
+    private logoContainer!: HTMLDivElement;
     /** @private compact menu button element */
-    private readonly compactMenuButton: HTMLButtonElement;
+    private compactMenuButton!: HTMLButtonElement;
     /** @private foldout container used in compact mode */
-    private readonly foldout: HTMLDivElement;
+    private foldout!: HTMLDivElement;
 
 
     private readonly trackedElements: WeakSet<Node> = new WeakSet();

package/src/engine/webcomponents/needle-engine.ts

@@ -14,7 +14,7 @@ import { getParam } from "../engine_utils.js";
 import { RGBAColor } from "../js-extensions/RGBAColor.js";
 import { ensureFonts } from "./fonts.js";
 import { arContainerClassName, AROverlayHandler } from "./needle-engine.ar-overlay.js";
-import type { registerObservableAttribute} from "./needle-engine.extras.js";
+import type { registerObservableAttribute } from "./needle-engine.extras.js";
 import { calculateProgress01, EngineLoadingView, type ILoadingViewHandler } from "./needle-engine.loading.js";
 
 declare global {
@@ -168,27 +168,19 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      */
     public get context() { return this._context; }
 
-    private _context: Context;
-    private _overlay_ar: AROverlayHandler;
+    private _context!: Context;
+    private _overlay_ar!: AROverlayHandler;
     private _loadingProgress01: number = 0;
     private _loadingView?: ILoadingViewHandler;
     private _previousSrc: string | null | string[] = null;
     /** @private set to true after <needle-engine> did load completely at least once. Set to false when < to false when <needle-engine> is removed from the document removed from the document */
     private _didFullyLoad: boolean = false;
+    private _didInitialize = false;
 
     constructor() {
         super();
-        this._overlay_ar = new AROverlayHandler();
-        // TODO: do we want to rename this event?
-        this.addEventListener("ready", this.onReady);
-
-        ensureFonts();
-
         this.attachShadow({ mode: 'open', delegatesFocus: true });
-        this.setAttribute("role", "application");
-        this.setAttribute("aria-label", "Needle Engine 3D scene");
         const template = document.createElement('template');
-        // #region CSS
         template.innerHTML = `<style>
     @import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100..1000&display=swap');
 
@@ -254,7 +246,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     }
     :host .quit-ar-button {
         position: absolute;
-        // top: env(titlebar-area-y); /** this doesnt work **/
+        /** top: env(titlebar-area-y); this doesnt work **/
         top: 60px; /** camera access needs a bit more space **/
         right: 20px;
         z-index: 9999;
@@ -267,24 +259,36 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     <slot class="overlay-content" style="display: contents;"></slot>
 </div>
 `;
-        // #endregion
 
-        if (this.shadowRoot)
-            this.shadowRoot.appendChild(template.content.cloneNode(true));
+        this.shadowRoot!.appendChild(template.content.cloneNode(true));
 
-        this._context = new Context({ domElement: this });
+        // TODO: do we want to rename this event?
+        this.addEventListener("ready", this.onReady);
         this.addEventListener("error", this.onError);
     }
 
+    private ensureInitialized() {
+        if (!this._didInitialize) {
+            this._didInitialize = true;
+            this.initializeDom();
+        }
+    }
+
+    // #region Init DOM
+    private initializeDom() {
+        ensureFonts();
+        this.setAttribute("role", "application");
+        this.setAttribute("aria-label", "Needle Engine 3D scene");
+    }
+
 
     /**
      * @internal
      */
-    async connectedCallback() {
-        if (debug) {
-            console.log("<needle-engine> connected");
-        }
+    connectedCallback() {
+        if (debug) console.log("<needle-engine> connected");
 
+        this.ensureInitialized();
         this.setPublicKey();
         this.setVersion();
 
@@ -293,9 +297,13 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
             this.setAttribute("tabindex", "0");
 
 
+        this._overlay_ar = new AROverlayHandler();
+        this._context ??= new Context({ domElement: this }); // we might have one already if onLoad is running
         this.addEventListener("xr-session-started", this.onXRSessionStarted);
         this.onSetupDesktop();
 
+
+
         if (!this.getAttribute("src")) {
             const global = (globalThis as any)["needle:codegen_files"] as unknown as string;
             if (debug) console.log("src is null, trying to load from globalThis[\"needle:codegen_files\"]", global);
@@ -442,6 +450,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     private async onLoad() {
 
         if (!this.isConnected) return;
+
         if (!this._context) {
             if (debug) console.warn("Create new context");
             this._context = new Context({ domElement: this });
@@ -476,7 +485,6 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         this.classList.add("loading");
 
 
-
         // Loading start events
         const allowOverridingDefaultLoading = hasCommercialLicense();
         // default loading can be overriden by calling preventDefault in the onload start event
@@ -901,7 +909,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     setAttribute(name: 'ktx2DecoderPath', value: string): void;
     /** Prevent Needle Engine context from being disposed when the element is removed from the DOM */
     setAttribute(name: 'keep-alive', value: 'true' | 'false'): void;
-    
+
     /** @private Public key used for licensing and feature gating. */
     setAttribute(name: 'public-key', value: string): void;
     /** @private Engine version string — usually set by the build/runtime. */
@@ -909,7 +917,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
 
     // LoadingAttributes
     // ...
-    
+
     // SkyboxAttributes
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
     setAttribute(name: 'background-image', value: string): void;
@@ -930,7 +938,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      * @example "background-color='#ff0000'" will set the background color to red.
      */
     setAttribute(name: 'background-color', value: string): void;
-    
+
     // RenderingAttributes
     /** Enable/disable renderer canvas transparency. */
     setAttribute(name: 'transparent', value: 'true' | 'false'): void;
@@ -953,9 +961,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     setAttribute(name: "autoplay", value: 'true' | 'false'): void;
     /** @private Used for switching the scene in SceneSwitcher */
     setAttribute(name: 'scene', value: string): void;
-    
+
     // setAttribute(name: 'loadstart', value: string): void;
-    
+
     /** @private Experimental.*/
     setAttribute(name: 'loading-blur', value: 'true' | 'false'): void;
     /** @private */
@@ -968,9 +976,9 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /** Generic typed setter for known Needle Engine attributes */
     // Comment out to see errors inside NE for undocumented attributes
     // setAttribute<T extends keyof NeedleEngineAttributes>(qualifiedName: T, value: NeedleEngineAttributes[T]): void;
-    
+
     setAttribute(qualifiedName: ({} & string), value: string): void;
-    
+
     // The ones we're using internally:
     /*
     setAttribute(name: "tabindex", value: string): void;
@@ -999,7 +1007,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     getAttribute(name: 'ktx2DecoderPath'): string | null;
     /** Prevent Needle Engine context from being disposed when the element is removed from the DOM */
     getAttribute(name: 'keep-alive'): string | null;
-    
+
     /** @private Public key used for licensing and feature gating. */
     getAttribute(name: 'public-key'): string | null;
     /** @private Engine version string — usually set by the build/runtime. */
@@ -1070,13 +1078,13 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     /** Typed getter for known NeedleEngine attribute names; returns the typed shape declared in NeedleEngineAttributes or null. */
     // getAttribute<T extends keyof NeedleEngineAttributes>(qualifiedName: T): NeedleEngineAttributes[T] | null;
     getAttribute(qualifiedName: ({} & string)): string | null;
-    
+
     // The ones we're using interally:
     /*
     getAttribute(name: "autostart"): string | null;
     getAttribute(name: "tabindex"): string | null;
     */
-    
+
     getAttribute(qualifiedName: string): string | null {
         return super.getAttribute(qualifiedName);
     }
@@ -1114,7 +1122,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
     // This would be better but doesn't completely solve it
     // addEventListener(type: ({} & string), listener: any, options?: boolean | AddEventListenerOptions): void;
-    
+
     // The ones we're using interally:
     /* 
     addEventListener(type: "error", listener: (ev: ErrorEvent) => void, options?: boolean | AddEventListenerOptions): void;
@@ -1123,8 +1131,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
     addEventListener(type: "drop", listener: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): void;
     addEventListener(type: "dragover", listener: (ev: DragEvent) => void, options?: boolean | AddEventListenerOptions): void;
     */
-    addEventListener(type: string, listener: any, options?: boolean | AddEventListenerOptions): void
-    {
+    addEventListener(type: string, listener: any, options?: boolean | AddEventListenerOptions): void {
         return super.addEventListener(type, listener as EventListenerOrEventListenerObject, options);
     }
 }

package/src/engine/xr/NeedleXRSession.ts

@@ -255,6 +255,7 @@ function handleAutoStart(value: string | null) {
 // }
 
 const $initialFov = Symbol("initial-fov");
+const $initialNear = Symbol("initial-near");
 
 /** 
  * This class manages an XRSession to provide helper methods and events. It provides easy access to the XRInputSources (controllers and hands)   
@@ -1070,6 +1071,12 @@ export class NeedleXRSession implements INeedleXRSession {
             this._originalCameraParent = this.context.mainCamera.parent;
             if (this.context.mainCamera instanceof PerspectiveCamera) {
                 this.context.mainCamera[$initialFov] = this.context.mainCamera.fov;
+
+                // if (this.mode === "immersive-ar" && this.context.mainCamera.near > .1) {
+                //     console.log("[WebXR] Setting near plane to 0.1 for better AR experience (was " + this.context.mainCamera.near + "). The initial near plane will be restored when the session ends.");
+                //     this.context.mainCamera.near = 0.1;
+                //     this.context.mainCamera[$initialNear] = this.context.mainCamera.near;
+                // }
             }
         }
 
@@ -1308,9 +1315,15 @@ export class NeedleXRSession implements INeedleXRSession {
                 setWorldScale(this.context.mainCamera, this._originalCameraWorldScale);
             }
 
-            if (this.context.mainCamera instanceof PerspectiveCamera && this.context.mainCamera[$initialFov]) {
-                this.context.mainCamera.fov = this.context.mainCamera[$initialFov]!;
-                this.context.mainCamera[$initialFov] = 0;
+            if (this.context.mainCamera instanceof PerspectiveCamera) {
+                if (this.context.mainCamera[$initialFov]) {
+                    this.context.mainCamera.fov = this.context.mainCamera[$initialFov]!;
+                    this.context.mainCamera[$initialFov] = 0;
+                }
+                if (this.context.mainCamera[$initialNear]) {
+                    this.context.mainCamera.near = this.context.mainCamera[$initialNear]!;
+                    this.context.mainCamera[$initialNear] = 0;
+                }
             }
         }
 

package/src/engine-components/ReflectionProbe.ts

@@ -1,4 +1,4 @@
-import { CubeTexture, EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, Object3D, Texture, Vector3 } from "three";
+import { Box3, Color, CubeTexture, EquirectangularReflectionMapping, LinearSRGBColorSpace, LineSegments, Material, Object3D, Quaternion, Texture, Vector3 } from "three";
 
 import { MaterialPropertyBlock } from "../engine/engine_materialpropertyblock.js";
 import { loadPMREM } from "../engine/engine_pmrem.js";
@@ -8,6 +8,8 @@ import { getParam, resolveUrl } from "../engine/engine_utils.js";
 import { BoxHelperComponent } from "./BoxHelperComponent.js";
 import { Behaviour } from "./Component.js";
 import { EventList } from "./EventList.js";
+import { getBoundingBox, getWorldPosition } from "../engine/engine_three_utils.js";
+import { CreateWireCube } from "../engine/engine_gizmos.js";
 
 export const debug = getParam("debugreflectionprobe");
 const disable = getParam("noreflectionprobe");
@@ -40,8 +42,11 @@ const $reflectionProbeKey = Symbol("reflectionProbeKey");
 export class ReflectionProbe extends Behaviour {
 
     private static _probes: Map<Context, ReflectionProbe[]> = new Map();
-    
-    
+    /** The bounding box for this component */
+    private box: Box3 | null = null;
+    private static testBox: Box3 = new Box3();
+    private static _identityRotation: Quaternion = new Quaternion();
+
     /**
      * Checks if the given material is currently using a reflection probe. This is determined by checking for an override on the material's "envMap" property, which is set by the Renderer component when applying a reflection probe.
      */
@@ -151,23 +156,33 @@ export class ReflectionProbe extends Behaviour {
      * Defines the center and size of the reflection probe's influence area.
      */
     @serializable(Vector3)
-    center?: Vector3;
+    center: Vector3 = new Vector3();
 
     /**
      * Defines the size of the reflection probe's influence area. Objects within this box will be affected by the probe's reflections.
      */
     @serializable(Vector3)
-    size?: Vector3;
+    size: Vector3 = new Vector3(1, 1, 1);
 
     /**
      * Workaround for lightmap. Compensates for the fact that lightmaps are pre-multiplied by intensity, while reflection probes are not. This means that if you use both lightmaps and reflection probes, you may need to adjust this value to get the correct balance between them. The default value of `Math.PI` is a good starting point for most cases, but you may need to tweak it based on your specific lighting setup and artistic needs.
      */
     __lightmapIntensityScale: boolean = true;
 
-    private _boxHelper?: BoxHelperComponent;
 
     private isInBox(obj: Object3D) {
-        return this._boxHelper?.isInBox(obj);
+
+        this.box ??= new Box3();
+        this.box!.setFromCenterAndSize(this.gameObject.worldPosition.add(this.center), this.gameObject.worldScale.multiply(this.size));
+
+        getBoundingBox([obj], undefined, undefined, ReflectionProbe.testBox);
+
+        if (ReflectionProbe.testBox.isEmpty()) {
+            return this.box.containsPoint(obj.worldPosition);
+        }
+        else {
+            return this.box?.intersectsBox(ReflectionProbe.testBox);
+        }
     }
 
     constructor() {
@@ -178,12 +193,15 @@ export class ReflectionProbe extends Behaviour {
         ReflectionProbe._probes.get(this.context)?.push(this);
     }
 
+    private _gizmo: LineSegments | null = null;
+    private _color: Color | null = null;
+
     /** @internal */
     awake() {
-        this._boxHelper = this.gameObject.addComponent(BoxHelperComponent) as BoxHelperComponent;
-        this._boxHelper.updateBox(true);
-        if (debug)
-            this._boxHelper.showHelper(0x555500, true);
+        if (debug) {
+            this._gizmo = CreateWireCube(0x555500);
+            this.gameObject.add(this._gizmo);
+        }
 
         if (this._texture) {
             this._texture.mapping = EquirectangularReflectionMapping;
@@ -192,6 +210,15 @@ export class ReflectionProbe extends Behaviour {
         }
     }
 
+    /** @internal */
+    update(): void {
+        if (this._gizmo) {
+            if (this.center) this._gizmo.position.copy(this.center);
+            if (this.size) this._gizmo.scale.copy(this.size);
+            this._gizmo.worldQuaternion = ReflectionProbe._identityRotation;
+        }
+    }
+
     /** @internal */
     onEnable(): void {
         ReflectionProbe.onEnabled?.invoke(this);

package/plugins/types/next.d.ts

@@ -1,3 +0,0 @@
-import { userSettings } from './userconfig.js';
-
-export declare function needleNext(nextConfig?: import('next').NextConfig, userSettings?: userSettings): Promise<import('next').NextConfig>;

package/plugins/types/vite.d.ts

@@ -1,14 +0,0 @@
-import { needleConfig, needleMeta } from "./needleConfig.d.ts";
-import { userSettings } from "./userconfig.d.ts";
-
-export declare function needlePlugins(command: import("vite").ConfigEnv["command"], meta?: needleMeta | null, userSettings?: userSettings): Promise<any>;
-
-/**
- * Loads the generated needle meta file
- */
-export declare function loadConfig(path: string | null = null): Promise<needleMeta | null>;
-
-/**
- * Returns true if the project is configured to use gzip compression
- */
-export declare function useGzip(config?: needleConfig): boolean;