@needle-tools/engine 4.9.3 → 4.10.0-beta.1

package/src/engine/engine_physics.ts

@@ -592,7 +592,7 @@ namespace NEMeshBVH {
                 const timeSinceLastUpdate = now - skinnedMesh.staticGeometryLastUpdate!;
                 const interval = skinnedMesh.autoUpdateMeshBvhInterval ?? 100;
                 if (skinnedMeshBVHNeedsUpdate || timeSinceLastUpdate > interval) {
-                    if(debugPhysics) console.warn(`Physics: updating skinned mesh bvh for ${mesh.name} after ${timeSinceLastUpdate.toFixed(2)}ms`);
+                    if (debugPhysics) console.warn(`Physics: updating skinned mesh bvh for ${mesh.name} after ${timeSinceLastUpdate.toFixed(2)}ms`);
                     skinnedMesh.bvhNeedsUpdate = false;
                     skinnedMesh.staticGeometryLastUpdate = now;
                     skinnedMesh.staticGenerator?.generate(skinnedMesh.staticGeometry);
@@ -709,8 +709,11 @@ namespace NEMeshBVH {
             else {
                 if (debugPhysics) console.warn("No bounds tree found for mesh", mesh.name, { workerTask: geom[workerTaskSymbol], hasAcceleratedRaycast: _acceleratedRaycast != null });
                 if (options.allowSlowRaycastFallback === false) {
-                    if (debugPhysics) console.warn("Skipping raycast because no bounds tree is available and allowSlowRaycastFallback is false");
-                    return false;
+                    const vertices = geom.getAttribute("position")?.array?.length ?? 0;
+                    if (vertices > 2000) {
+                        if (debugPhysics) console.warn("Skipping raycast because no bounds tree is available and allowSlowRaycastFallback is false");
+                        return false;
+                    }
                 }
             }
             const prevFirstHitOnly = raycaster.firstHitOnly;

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

@@ -32,10 +32,22 @@ export class NeedleLogoElement extends HTMLElement {
             cursor: pointer;
         }
         img {
-            width: 95px;
             height: 100%;
             align-self: end;
             margin-left: 0.6rem;
+            transition: transform 0.2s;
+        }
+        img.with-text {
+            width: 11.5ch;
+            &:hover {
+                transform: scale(1.02);
+            }
+        }
+        img.compact {
+            width: 1.7em;
+            &:hover {
+                transform: scale(1.1);
+            }
         }
         span {
             font-size: 1rem;
@@ -43,12 +55,14 @@ export class NeedleLogoElement extends HTMLElement {
         }
         </style>
         <div class="wrapper">
-            <img class="logo" src=${needleLogoSVG} />
+            <img class="logo with-text" src=${needleLogoSVG} />
         </div>
         `;
         this._root.appendChild(template.content.cloneNode(true));
         this.wrapper = this._root.querySelector(".wrapper") as HTMLDivElement;
         this._root.appendChild(this.wrapper);
+        this.logoElement = this._root.querySelector("img.logo") as HTMLImageElement;
+
         // this.wrapper.classList.add("wrapper");
 
         // this.wrapper.appendChild(this.logoElement);
@@ -67,13 +81,24 @@ export class NeedleLogoElement extends HTMLElement {
 
     private readonly _root: ShadowRoot;
     private readonly wrapper: HTMLDivElement;
-    private readonly logoElement: HTMLImageElement = document.createElement("img");
-    private readonly textElement: HTMLSpanElement = document.createElement("span");
+    private readonly logoElement: HTMLImageElement;
 
     setLogoVisible(val: boolean) {
         this.logoElement.style.display = val ? "block" : "none";
     }
 
+    setType(type: "full" | "compact") {
+        if (type === "full") {
+            this.logoElement.src = needleLogoSVG;
+            this.logoElement.classList.remove("with-text");
+            this.logoElement.classList.remove("compact");
+        } else {
+            this.logoElement.src = needleLogoOnlySVG;
+            this.logoElement.classList.add("with-text");
+            this.logoElement.classList.add("compact");
+        }
+    }
+
 }
 if (!customElements.get(elementName))
     customElements.define(elementName, NeedleLogoElement);

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

@@ -459,7 +459,7 @@ export class NeedleMenuElement extends HTMLElement {
 
         .logo {
             cursor: pointer;
-            padding-left: 0.6rem;
+            padding-left: 0.0rem;
             padding-bottom: .02rem;
             margin-right: 0.5rem;
         }
@@ -664,8 +664,8 @@ export class NeedleMenuElement extends HTMLElement {
                         <slot name="end"></slot>
                     </div>
                 </div>
-                <div style="user-select:none" class="logo">
-                    <span class="madewith notranslate">powered by</span>
+                <div style="user-select:none;" class="logo">
+                    <span class="madewith notranslate" style="display:none;">powered by</span>
                 </div>
             </div>
             <button class="compact-menu-button">
@@ -698,6 +698,7 @@ export class NeedleMenuElement extends HTMLElement {
         this.wrapper.classList.add("wrapper");
 
         const logo = NeedleLogoElement.create();
+        logo.setType("compact");
         logo.style.minHeight = "1rem";
         this.logoContainer.append(logo);
         this.logoContainer.addEventListener("click", () => {

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

@@ -158,8 +158,18 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private onDoneLoading() {
         if (this._loadingElement) {
             if (debug) console.log("Hiding loading element");
-            this._loadingElement.style.display = "none";
-            this._loadingElement.remove();
+            // animate alpha to 0
+            const element = this._loadingElement;
+            element.animate([
+                { opacity: 1 },
+                { opacity: 0 }
+            ], {
+                duration: 200,
+                easing: 'ease-in-out',
+            }).addEventListener('finish', () => {
+                element.style.display = "none";
+                element.remove();
+            });
         }
         if (this._progressLoop)
             clearInterval(this._progressLoop);
@@ -190,6 +200,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 loadingStyle = "light";
         }
 
+
         const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "absolute";
@@ -197,6 +208,7 @@ export class EngineLoadingView implements ILoadingViewHandler {
             this._loadingElement.style.height = "100%";
             this._loadingElement.style.left = "0";
             this._loadingElement.style.top = "0";
+            this._loadingElement.style.overflow = "hidden";
             const loadingBackgroundColor = this._element.getAttribute("loading-background");
             if (loadingBackgroundColor) {
                 this._loadingElement.style.background = loadingBackgroundColor;
@@ -227,24 +239,48 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
 
         const content = document.createElement("div");
+        content.style.cssText = `
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+        `
         this._loadingElement.appendChild(content);
 
+        const poster = this._element.getAttribute("poster");
+        if (poster !== null && poster !== "0") {
+            const backgroundImage = document.createElement("div");
+            const backgroundBlur = poster?.length ? "0px" : "50px";
+            backgroundImage.style.cssText = `
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 0;
+            right: 0;
+            z-index: -1;
+            overflow: hidden;
+
+            margin: -${backgroundBlur};
+            background: url('${poster?.length ? poster : "/include/poster.webp"}') center center no-repeat;
+            background-size: cover;
+            filter: blur(${backgroundBlur});
+        `;
+            this._loadingElement.appendChild(backgroundImage);
+        }
+
         const logo = document.createElement("img");
-        const logoSize = 120;
-        logo.style.width = `${logoSize}px`;
-        logo.style.height = `${logoSize}px`;
-        logo.style.paddingTop = "20px";
-        logo.style.paddingBottom = "10px";
-        logo.style.margin = "0px";
+        const logoWidth = "80%";
+        const logoHeight = "15%";
+        const logoDelay = ".2s";
         logo.style.userSelect = "none";
         logo.style.objectFit = "contain";
-        logo.style.transition = "transform 1.5s ease-out, opacity .3s ease-in-out";
         logo.style.transform = "translateY(30px)";
-        logo.style.opacity = "0.05";
-        setTimeout(() => {
-            logo.style.opacity = "1";
-            logo.style.transform = "translateY(0px)";
-        }, 1);
+        logo.style.opacity = "0.0000001";
+        logo.style.transition = `transform 1s ease-out ${logoDelay}, opacity .3s ease-in-out ${logoDelay}`;
         logo.src = needleLogoOnlySVG;
         let isUsingCustomLogo = false;
         if (hasLicense && this._element) {
@@ -252,8 +288,15 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (customLogo) {
                 isUsingCustomLogo = true;
                 logo.src = customLogo;
+                setTimeout(() => {
+                    logo.style.opacity = "1";
+                    logo.style.transform = "translateY(0px)";
+                }, 1);
             }
         }
+
+        logo.style.width = `${logoWidth}`;
+        logo.style.height = `min(1000px, max(${logoHeight}, 50px))`;
         content.appendChild(logo);
 
         const details = document.createElement("div");
@@ -273,18 +316,14 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const maxWidth = 100;
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
-        loadingBarContainer.style.height = "3px";
+        loadingBarContainer.style.height = "5px";
         loadingBarContainer.style.position = "absolute";
         loadingBarContainer.style.left = "0";
-        loadingBarContainer.style.bottom = "0px";
+        loadingBarContainer.style.top = "0px";
         loadingBarContainer.style.opacity = "0";
-        loadingBarContainer.style.transition = "opacity 1s ease-in-out 2s";
+        loadingBarContainer.style.transition = "opacity 1s ease-in-out";
+        loadingBarContainer.style.backgroundColor = "rgba(240,240,240,.5)"
         setTimeout(() => { loadingBarContainer.style.opacity = "1"; }, 1);
-        if (loadingStyle === "light")
-            loadingBarContainer.style.backgroundColor = "rgba(0,0,0,.2)"
-        else
-            loadingBarContainer.style.backgroundColor = "rgba(255,255,255,.2)"
-        // loadingBarContainer.style.alignItems = "center";
 
         this._loadingElement.appendChild(loadingBarContainer);
 
@@ -294,9 +333,9 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const getGradientPos = function (t: number): string {
             return Mathf.lerp(0, maxWidth, t) + "%";
         }
-        this._loadingBar.style.background = "#66A22F";
-            // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
+        // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
         this._loadingBar.style.backgroundAttachment = "fixed";
+        this._loadingBar.style.background = "#c4c4c4ab";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
         if (hasLicense && this._element) {
@@ -335,40 +374,40 @@ export class EngineLoadingView implements ILoadingViewHandler {
         //     }
         // }
 
-        this.handleRuntimeLicense(this._loadingElement);
+        // this.handleRuntimeLicense(this._loadingElement);
 
         return this._loadingElement;
     }
 
-    private async handleRuntimeLicense(loadingElement: HTMLElement) {
-        // First check if we have a commercial license
-        let commercialLicense = hasCommercialLicense();
-        // if it's the case then we don't need to perform a runtime check
-        if (commercialLicense) return;
-
-        // If we don't have a commercial license, then we need to display our message
-        if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
-        const nonCommercialContainer = document.createElement("div");
-        nonCommercialContainer.style.paddingTop = ".6em";
-        nonCommercialContainer.style.fontSize = ".8em";
-        nonCommercialContainer.style.textTransform = "uppercase";
-        nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
-        nonCommercialContainer.style.cursor = "pointer";
-        nonCommercialContainer.style.userSelect = "none";
-        nonCommercialContainer.style.textAlign = "center";
-        nonCommercialContainer.style.pointerEvents = "all";
-        nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
-        nonCommercialContainer.style.opacity = "0";
-        loadingElement.appendChild(nonCommercialContainer);
-
-        // Use the runtime license check
-        if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
-            if (debugLicense) console.log("Waiting for runtime license check");
-            await runtimeLicenseCheckPromise;
-            commercialLicense = hasCommercialLicense();
-        }
-        if (commercialLicense) return;
-        nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
-        nonCommercialContainer.style.opacity = "1";
-    }
+    // private async handleRuntimeLicense(loadingElement: HTMLElement) {
+    //     // First check if we have a commercial license
+    //     let commercialLicense = hasCommercialLicense();
+    //     // if it's the case then we don't need to perform a runtime check
+    //     if (commercialLicense) return;
+
+    //     // If we don't have a commercial license, then we need to display our message
+    //     if (debugLicense) console.log("Loading UI has commercial license?", commercialLicense);
+    //     const nonCommercialContainer = document.createElement("div");
+    //     nonCommercialContainer.style.paddingTop = ".6em";
+    //     nonCommercialContainer.style.fontSize = ".8em";
+    //     nonCommercialContainer.style.textTransform = "uppercase";
+    //     nonCommercialContainer.innerText = "NEEDLE ENGINE NON COMMERCIAL VERSION\nCLICK HERE TO GET A LICENSE";
+    //     nonCommercialContainer.style.cursor = "pointer";
+    //     nonCommercialContainer.style.userSelect = "none";
+    //     nonCommercialContainer.style.textAlign = "center";
+    //     nonCommercialContainer.style.pointerEvents = "all";
+    //     nonCommercialContainer.addEventListener("click", () => window.open("https://needle.tools/pricing", "_self"));
+    //     nonCommercialContainer.style.opacity = "0";
+    //     loadingElement.appendChild(nonCommercialContainer);
+
+    //     // Use the runtime license check
+    //     if (!isDevEnvironment() && runtimeLicenseCheckPromise) {
+    //         if (debugLicense) console.log("Waiting for runtime license check");
+    //         await runtimeLicenseCheckPromise;
+    //         commercialLicense = hasCommercialLicense();
+    //     }
+    //     if (commercialLicense) return;
+    //     nonCommercialContainer.style.transition = "opacity .5s ease-in-out";
+    //     nonCommercialContainer.style.opacity = "1";
+    // }
 }

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

@@ -85,12 +85,17 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
      * <needle-engine></needle-engine>
      * @returns {boolean | null} if the attribute is not set it returns null
      */
-    public get cameraControls(): boolean | null {
+    get cameraControls(): boolean | null {
         const attr = this.getAttribute("camera-controls") as NeedleEngineAttributes["camera-controls"] | ({} & string)
         if (attr == null) return null;
         if (attr === null || attr === "False" || attr === "false" || attr === "0" || attr === "none") return false;
         return true;
     }
+    set cameraControls(value: boolean | null) {
+        if (value === null) this.removeAttribute("camera-controls");
+        else this.setAttribute("camera-controls", value ? "true" : "false");
+    }
+    
 
     /**
      * Get the current context for this web component instance. The context is created when the src attribute is set and the loading has finished.  

package/src/engine-components/AnimatorController.ts

@@ -276,7 +276,7 @@ export class AnimatorController {
      * @returns The found state or null if not found
      */
     FindState(name: string | number | undefined | null): State | null { return this.findState(name); }
-    
+
     /**
      * Finds an animation state by name or hash.
      * 
@@ -321,6 +321,25 @@ export class AnimatorController {
         return action;
     }
 
+    // addState(state: State, layerIndex: number = 0) {
+    //     if (!this.model) throw new Error("AnimatorController model is missing");
+    //     if (layerIndex < 0 || layerIndex >= this.model.layers.length) {
+    //         throw new Error(`Invalid layer index: ${layerIndex}`);
+    //     }
+    //     const layer = this.model.layers[layerIndex];
+    //     if (!layer.stateMachine) {
+    //         layer.stateMachine = { states: [], defaultState: 0 };
+    //     }
+    //     if (!layer.stateMachine.states) {
+    //         layer.stateMachine.states = [];
+    //     }
+    //     if (state.hash === undefined) {
+    //         state.hash = stringToHash(state.name || "state" + layer.stateMachine.states.length);
+    //     }
+
+    // }
+
+
     /**
      * The normalized time (0-1) to start playing the first state at.
      * This affects the initial state when the animator is first enabled.
@@ -331,7 +350,7 @@ export class AnimatorController {
      * The Animator component this controller is bound to.
      */
     animator?: Animator;
-    
+
     /**
      * The data model describing the animation states and transitions.
      */

package/src/engine-components/CameraUtils.ts

@@ -117,16 +117,15 @@ function createDefaultCameraControls(context: IContext, cam?: ICamera) {
     if (cameraObject) {
         const orbit = getOrAddComponent(cameraObject, OrbitControls) as OrbitControls;
         orbit.sourceId = cam?.sourceId ?? "unknown";
+        // /enable auto-rotate if the auto-rotate attribute is provided
         const autoRotate = context.domElement.getAttribute("auto-rotate");
-        orbit.autoRotate = autoRotate !== undefined && autoRotate !== null && (autoRotate != "0" && autoRotate?.toLowerCase() != "false");
-        orbit.autoRotateSpeed = 0.5;
-        orbit.autoFit = true;
-        if (orbit.autoRotate && autoRotate) {
-            const autoRotateValue = parseFloat(autoRotate);
-            if (!isNaN(autoRotateValue)) {
-                orbit.autoRotateSpeed = autoRotateValue;
-            }
-        }
+        orbit.autoRotate = autoRotate != "0" && autoRotate?.toLowerCase() != "false";
+        const autoRotateSpeed = Number.parseFloat(autoRotate || ".5");
+        orbit.autoRotateSpeed = !isNaN(autoRotateSpeed) ? autoRotateSpeed : .5;
+        console.log("Auto-rotate", orbit.autoRotate, "speed:", orbit.autoRotateSpeed);
+        const autoFit = context.domElement.getAttribute("auto-fit");
+        orbit.autoFit = autoFit !== "0" && autoFit?.toLowerCase() != "false";
+        orbit.autoTarget = true;
     }
     else {
         console.warn("Missing camera object, can not add orbit controls")