@needle-tools/engine 4.10.0-beta → 4.10.0-beta.2

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

@@ -374,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

@@ -38,14 +38,18 @@ const observedAttributes = [
     "loadstart",
     "progress",
     "loadfinished",
+
     "dracoDecoderPath",
     "dracoDecoderType",
     "ktx2DecoderPath",
+
     "tone-mapping",
     "tone-mapping-exposure",
     "background-blurriness",
     "background-color",
     "environment-intensity",
+
+    "focus-rect",
 ]
 
 // https://developers.google.com/web/fundamentals/web-components/customelements
@@ -95,7 +99,7 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         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.  
@@ -331,17 +335,17 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 if (debug) console.log("ktx2DecoderPath", newValue);
                 setKtx2TranscoderPath(newValue);
                 break;
-                
+
             case "tonemapping":
             case "tone-mapping":
             case "tone-mapping-exposure":
             case "background-blurriness":
             case "background-color":
             case "environment-intensity":
-            {
-                this.applyAttributes();
-                break;
-            }
+                {
+                    this.applyAttributes();
+                    break;
+                }
             case "public-key": {
                 if (newValue != PUBLIC_KEY)
                     this.setPublicKey();
@@ -352,6 +356,25 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                     this.setVersion();
                 break;
             }
+
+            case "focus-rect":
+                {
+                    const focus_rect = this.getAttribute("focus-rect") as HTMLElement | string | null;
+                    if (focus_rect && this._context) {
+                        if (focus_rect === null) {
+                            this._context.setCameraFocusRect(null);
+                        }
+                        else if (typeof focus_rect === "string" && focus_rect.length > 0) {
+                            const element = document.querySelector(focus_rect);
+                            this._context.setCameraFocusRect(element instanceof HTMLElement ? element : null);
+                        }
+                        else if (focus_rect instanceof HTMLElement) {
+                            this._context.setCameraFocusRect(focus_rect);
+                        }
+
+                    }
+                }
+                break;
         }
     }
 
@@ -570,6 +593,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
                 this._context.renderer.setClearColor(rgbaColor, rgbaColor.alpha);
                 this.context.scene.background = null;
             }
+            // HACK: if we set background-color to a color and then back to null we want the background-image attribute to re-apply
+            else if (this.getAttribute("background-image")) {
+                this.setAttribute("background-image", this.getAttribute("background-image")!);
+            }
         }
     }
 

package/src/engine-components/OrbitControls.ts

@@ -993,11 +993,50 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
     // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
+
     /** 
      * Fits the camera to show the objects provided (defaults to the scene if no objects are passed in) 
+     * @param options The options for fitting the camera. Use to provide objects to fit to, fit direction and size and other settings.
     */
-    fitCamera(options?: OrbitFitCameraOptions): void {
+    fitCamera(options?: OrbitFitCameraOptions);
+    /** @deprecated Use fitCamera(options) */
+    fitCamera(objects?: Object3D | Array<Object3D>, options?: Omit<OrbitFitCameraOptions, "objects">);    
+    fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | OrbitFitCameraOptions, options?: OrbitFitCameraOptions): void {
+
+
+        let objects: Object3D | Array<Object3D> | undefined = undefined;
+        // If the user passed in an array as first argument
+        if (Array.isArray(objectsOrOptions)) {
+            objects = objectsOrOptions;
+        }
+        // If the user passed in an object as first argument
+        else if (objectsOrOptions && "type" in objectsOrOptions) {
+            objects = objectsOrOptions;
+        }
+        // If the user passed in an object as first argument and options as second argument
+        else if (objectsOrOptions && typeof objectsOrOptions === "object") {
+            if (!(objectsOrOptions instanceof Object3D) && !Array.isArray(objectsOrOptions)) {
+                options = objectsOrOptions;
+                objects = options.objects;
+            }
+        }
+        // Ensure objects are setup correctly
+        if (objects && !Array.isArray(objects)) {
+            objects = [objects];
+        }
+        if (!Array.isArray(objects) || objects && objects.length <= 0) {
+            objects = this.context.scene.children;
+        }
+
+        // Make sure there's anything to fit to
+        if (!Array.isArray(objects) || objects.length <= 0) {
+            console.warn("No objects to fit camera to...");
+            return;
+        }
+
+
         const res = fitCamera({
+            objects: [...objects],
             ...options,
             autoApply: false,
             context: this.context,

package/src/engine-components/Renderer.ts

@@ -358,8 +358,11 @@ export class Renderer extends Behaviour implements IRenderer {
     //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
 
+        // @ts-ignore (original materials will be set during deserialization)
+        if(this._originalMaterials === undefined) return null;
+
         // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
-        if (!this.__didAwake) return null;
+        if (this.__isDeserializing === true) return null;
 
         if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
             if (!this._originalMaterials) this._originalMaterials = [];
@@ -725,6 +728,8 @@ export class Renderer extends Behaviour implements IRenderer {
                 // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
                 if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
                     mat.envMap = this.context.scene.environment;
+                    mat.envMapIntensity = this.context.scene.environmentIntensity;
+                    mat.envMapRotation = this.context.scene.environmentRotation;
                 }
             }
         }

package/src/engine-components/Skybox.ts

@@ -8,7 +8,7 @@ import { syncField } from "../engine/engine_networking_auto.js";
 import { loadPMREM } from "../engine/engine_pmrem.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { type IContext } from "../engine/engine_types.js";
-import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback } from "../engine/engine_utils.js";
+import { addAttributeChangeCallback, getParam, PromiseAllWithErrors, removeAttributeChangeCallback, toSourceId } from "../engine/engine_utils.js";
 import { registerObservableAttribute } from "../engine/webcomponents/needle-engine.extras.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { Behaviour, GameObject } from "./Component.js";
@@ -27,15 +27,34 @@ function createRemoteSkyboxComponent(context: IContext, url: string, skybox: boo
     }
 
     const remote = new RemoteSkybox();
+    remote.sourceId = toSourceId(url);
     remote.allowDrop = false;
     remote.allowNetworking = false;
     remote.background = skybox;
     remote.environment = environment;
     GameObject.addComponent(context.scene, remote);
     const urlChanged = newValue => {
-        if (typeof newValue !== "string") return;
-        if (debug) console.log(attribute, "CHANGED TO", newValue)
-        remote.setSkybox(newValue);
+        if (debug) console.log(attribute, "CHANGED TO", newValue);
+        if (newValue) {
+            if (typeof newValue !== "string") {
+                console.warn("Invalid attribute value for " + attribute);
+                return;
+            }
+            remote.setSkybox(newValue);
+        }
+        else {
+            if (remote.sourceId) {
+                if (environment) {
+                    if (!context.sceneLighting.internalEnableReflection(remote.sourceId)) {
+                        context.scene.environment = null;
+                    }
+                }
+                if (skybox) {
+                    const skybox = context.lightmaps.tryGetSkybox(remote.sourceId);
+                    context.scene.background = skybox;
+                }
+            }
+        }
     };
     addAttributeChangeCallback(context.domElement, attribute, urlChanged);
     remote.addEventListener("destroy", () => {
@@ -50,7 +69,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreationStart, (args) => {
     const context = args.context;
     const backgroundImage = context.domElement.getAttribute("background-image");
     const environmentImage = context.domElement.getAttribute("environment-image");
-    
+
     if (backgroundImage) {
         if (debug) console.log("Creating RemoteSkybox to load background " + backgroundImage);
         // if the user is loading a GLB without a camera then the CameraUtils (which creates the default camera)
@@ -246,8 +265,8 @@ export class RemoteSkybox extends Behaviour {
             envMap.needsUpdate = true;
         }
 
-        if(this.destroyed) return;
-        if(!this.context) {
+        if (this.destroyed) return;
+        if (!this.context) {
             console.warn("RemoteSkybox: Context is not available - can not apply skybox.");
             return;
         }

package/src/engine-components/codegen/components.ts

@@ -208,6 +208,7 @@ export { ClickThrough } from "../web/Clickthrough.js";
 export { CursorFollow } from "../web/CursorFollow.js";
 export { HoverAnimation } from "../web/HoverAnimation.js";
 export { ScrollFollow } from "../web/ScrollFollow.js";
+export { ViewBox } from "../web/ViewBox.js";
 export { Avatar } from "../webxr/Avatar.js";
 export { XRControllerFollow } from "../webxr/controllers/XRControllerFollow.js";
 export { XRControllerModel } from "../webxr/controllers/XRControllerModel.js";

package/src/engine-components/timeline/PlayableDirector.ts

@@ -66,10 +66,19 @@ export class PlayableDirector extends Behaviour {
         this.createTrackFunctions[type] = fn;
     }
 
+    /**
+     * The timeline asset that is played by this director.
+     */
     playableAsset?: Models.TimelineAssetModel;
+
     /** Set to true to start playing the timeline when the scene starts */
     @serializable()
     playOnAwake?: boolean;
+
+    /**
+     * Determines how the timeline behaves when it reaches the end of its duration.
+     * @default DirectorWrapMode.Loop
+     */
     @serializable()
     extrapolationMode: DirectorWrapMode = DirectorWrapMode.Loop;
 

package/src/engine-components/timeline/TimelineModels.ts

@@ -92,4 +92,12 @@ export declare class SignalMarkerModel extends MarkerModel {
     asset: string;
 }
 
-export type ScrollMarkerModel = MarkerModel & { selector: string };
+/**
+ * Marker with a name, used for scroll-driven timelines. It is used together with elements in your HTML to define what time in the timeline should be active when the element is in the scroll view.
+ * 
+ * @example Mark html elements to define scroll positions 
+ * ```html
+ * <div data-timeline-marker>...</div>
+ * ```
+ */
+export type ScrollMarkerModel = MarkerModel & { name: string };

package/src/engine-components/timeline/TimelineTracks.ts

@@ -175,8 +175,10 @@ export class AnimationTrackHandler extends TrackHandler {
     // which means we want to notify the object that it's not animated anymore
     // and the animator can then take over
     onStateChanged() {
-        if (this._animator)
-            setObjectAnimated(this._animator.gameObject, this, this.director.isPlaying);
+        if (this._animator) {
+            // We can not check the *isPlaying* state here because the timeline might be paused and evaluated by e.g. ScrollFollow
+            setObjectAnimated(this._animator.gameObject, this, this.director.enabled && this.director.weight > 0);
+        }
     }
 
     createHooks(clipModel: Models.AnimationClipModel, clip) {

package/src/engine-components/utils/LookAt.ts

@@ -1,5 +1,6 @@
 import { Matrix4, Object3D, Quaternion, Vector3 } from "three";
 
+import { isDevEnvironment } from "../../engine/debug/index.js";
 import { serializable } from "../../engine/engine_serialization.js";
 import { lookAtObject } from "../../engine/engine_three_utils.js";
 import { type UsdzBehaviour } from "../../engine-components/export/usdz/extensions/behavior/Behaviour.js";
@@ -42,7 +43,10 @@ export class LookAt extends Behaviour implements UsdzBehaviour {
     /** @internal */
     onBeforeRender(): void {
         let target: Object3D | null | undefined = this.target;
-        if (!target) target = this.context.mainCamera;
+        if (!target) {
+            target = this.context.mainCamera;
+            if (isDevEnvironment()) console.warn(`[LookAt] No target set on ${this.name}, using main camera as target.`);
+        }
         if (!target) return;
 
         let copyTargetRotation = this.copyTargetRotation;

package/src/engine-components/web/Clickthrough.ts

@@ -1,12 +1,21 @@
 import { NEPointerEvent } from "../../engine/engine_input.js";
 import { onStart } from "../../engine/engine_lifecycle_api.js";
+import { addAttributeChangeCallback } from "../../engine/engine_utils.js";
 import { Behaviour } from "../Component.js";
 
 // Automatically add ClickThrough component if "clickthrough" attribute is present on the needle-engine element
 onStart(ctx => {
     const attribute = ctx.domElement.getAttribute("clickthrough");
-    if (attribute !== null && attribute !== "0" && attribute !== "false") {
-        ctx.scene.addComponent(ClickThrough);
+    if (clickthroughEnabled(attribute)) {
+        const comp = ctx.scene.addComponent(ClickThrough);
+        addAttributeChangeCallback(ctx.domElement, "clickthrough", () => {
+            const attribute = ctx.domElement.getAttribute("clickthrough");
+            comp.enabled = clickthroughEnabled(attribute);
+        });
+    }
+
+    function clickthroughEnabled(val: string | null) {
+        return val !== null && val !== "0" && val !== "false";
     }
 });