@needle-tools/engine 3.2.13-alpha → 3.2.15-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.2.13-alpha",
+    "version": "3.2.15-alpha",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",
@@ -61,7 +61,7 @@
         "postprocessing": "^6.30.1",
         "simplex-noise": "^4.0.1",
         "stats.js": "^0.17.0",
-        "three": "npm:@needle-tools/three@^0.146.6",
+        "three": "npm:@needle-tools/three@^0.146.8",
         "three-mesh-ui": "^6.4.5",
         "three.quarks": "^0.7.3",
         "uuid": "^9.0.0",

package/src/engine/codegen/register_types.js

@@ -95,6 +95,7 @@ import { Networking } from "../../engine-components/Networking";
 import { NoiseModule } from "../../engine-components/ParticleSystemModules";
 import { ObjectRaycaster } from "../../engine-components/ui/Raycaster";
 import { OffsetConstraint } from "../../engine-components/OffsetConstraint";
+import { OpenURL } from "../../engine-components/utils/OpenURL";
 import { OrbitControls } from "../../engine-components/OrbitControls";
 import { ParticleBurst } from "../../engine-components/ParticleSystemModules";
 import { ParticleSubEmitter } from "../../engine-components/ParticleSystemSubEmitter";
@@ -284,6 +285,7 @@ TypeStore.add("Networking", Networking);
 TypeStore.add("NoiseModule", NoiseModule);
 TypeStore.add("ObjectRaycaster", ObjectRaycaster);
 TypeStore.add("OffsetConstraint", OffsetConstraint);
+TypeStore.add("OpenURL", OpenURL);
 TypeStore.add("OrbitControls", OrbitControls);
 TypeStore.add("ParticleBurst", ParticleBurst);
 TypeStore.add("ParticleSubEmitter", ParticleSubEmitter);

package/src/engine/engine_license.ts

@@ -1,4 +1,4 @@
-import { getParam } from "./engine_utils";
+import { getParam, isMobileDevice } from "./engine_utils";
 import { ContextEvent, ContextRegistry } from "./engine_context_registry";
 import { IContext } from "./engine_types";
 import { logoSVG } from "./assets";
@@ -31,8 +31,8 @@ async function showLicenseInfo(ctx: IContext) {
 
 
 const licenseElementIdentifier = "needle-license-element";
-const licenseDuration = 15000;
-const licenseDelay = 500;
+const licenseDuration = 5000;
+const licenseDelay = 200;
 
 function onNonCommercialVersionDetected(ctx: IContext) {
     setTimeout(() => insertNonCommercialUseHint(ctx), 2000);
@@ -62,7 +62,8 @@ function insertNonCommercialUseHint(ctx: IContext) {
 
     const textElement = document.createElement("div");
     textElement.classList.add("text");
-    textElement.innerHTML = "Needle Engine<br/><span class=\"non-commercial\">Non Commercial</span>";
+    // if (!isMobileDevice())
+    //     textElement.innerHTML = "Needle Engine<br/><span class=\"non-commercial\">Non Commercial</span>";
     licenseElement.appendChild(textElement);
 
     licenseElement.title = "Needle Engine — non commercial version";
@@ -157,11 +158,11 @@ function createLicenseStyle() {
         animation-delay: ${licenseDelay / 1000}s;
         animation-easing: ease-in-out;
         mix-blend-mode: difference;
-        color: rgb(40, 40, 40); 
+        color: rgb(0, 0, 0); 
         mix-blend-mode: difference;
         line-height: 1em;
         margin-left: -3px;
-        text-shadow: 0 0 2px rgba(200,200,200, .3);
+        text-shadow: 0 0 2px rgba(200,200,200, .5);
     }
 
     ${selector} .text .non-commercial {
@@ -175,30 +176,16 @@ function createLicenseStyle() {
             transform: translate(0px, 10px);
             pointer-events: none;
         }
-        1% {
-            transform: translate(0, -5px);
-            opacity: 1;
-        }
-        2% {
-            transform: translate(0, 2.5px);
-        }
-        3% {
+        8% {
             transform: translate(0, 0px);
             pointer-events: all;
+            opacity: 1;
+            transform: scale(1.1)
         }
-        4% {
-            transform: scale(1)
-        }
-        4.5% {
-            transform: scale(1.3)
-        }
-        6% {
-            transform: scale(1.32)
-        }
-        7% {
+        20% {
             transform: scale(1)
         }
-        98% {
+        90% {
             opacity: 1;
             pointer-events: all;
             transform: scale(1)

package/src/engine-components/SceneSwitcher.ts

@@ -186,8 +186,33 @@ export class SceneSwitcher extends Behaviour {
         return this.select(this._currentIndex - 1);
     }
 
-    select(index: number): Promise<boolean> {
-        if (debug) console.log("select", index)
+    select(index: number | string): Promise<boolean> {
+        if (debug) console.log("select", index);
+
+        if(typeof index === "object"){
+            // If a user tries to reference a scene object in a UnityEvent and invoke select(obj) 
+            // Then the object will be serialized as a object { guid : ... } or with the index json pointer
+            // This case is not supported right now. Object references in the editor must not be scene references
+            console.warn("Switching to \"" + index + "\" might not work. Please either use an index or a AssetReference (not a scene reference)");
+        }
+
+        if (typeof index === "string") {
+            // If the parameter is a string we try to resolve the scene by its uri
+            // it's either already known in the scenes array
+            // or we create/get a new AssetReference and try to switch to that
+            const scene = this.scenes?.find(s => s.uri === index);
+            if (!scene) {
+                // Ok the scene is unknown to the scene switcher
+                // we create a new asset reference (or get an existing one)
+                // And switch to that. With this we can not modify the history
+                // Until the scene switcher can store the uri in the history instead of the index
+                const reference = AssetReference.getOrCreate(this.sourceId ?? "", index, this.context);
+                return this.switchScene(reference);
+            }
+            if (scene) index = this.scenes.indexOf(scene);
+            else return couldNotLoadScenePromise;
+        }
+
         if (!this.scenes?.length) return couldNotLoadScenePromise;
         if (index < 0) {
             if (this.clamp) return couldNotLoadScenePromise;
@@ -225,7 +250,7 @@ export class SceneSwitcher extends Behaviour {
                 GameObject.add(scene.asset, this.gameObject);
                 if (this.useSceneLighting)
                     this.context.sceneLighting.enable(scene)
-                if (this.useHistory) {
+                if (this.useHistory && index >= 0) {
                     // save the loaded scene as an url parameter
                     if (this.queryParameterName?.length)
                         setParamWithoutReload(this.queryParameterName, index.toString(), this.useHistory);

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

@@ -93,6 +93,7 @@ export { Networking } from "../Networking";
 export { NoiseModule } from "../ParticleSystemModules";
 export { ObjectRaycaster } from "../ui/Raycaster";
 export { OffsetConstraint } from "../OffsetConstraint";
+export { OpenURL } from "../utils/OpenURL";
 export { OrbitControls } from "../OrbitControls";
 export { ParticleBurst } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";

package/src/engine-components/export/usdz/USDZExporter.ts

@@ -1,6 +1,5 @@
 import { delay, getParam, isiOS, isMobileDevice, isSafari } from "../../../engine/engine_utils";
-import { Object3D, Color } from "three";
-import * as THREE from "three";
+import { Object3D, Color, Mesh, Matrix4 } from "three";
 import { USDZExporter as ThreeUSDZExporter } from "three/examples/jsm/exporters/USDZExporter";
 import { AnimationExtension } from "./extensions/Animation"
 import { ensureQuicklookLinkIsCreated } from "./utils/quicklook";
@@ -13,6 +12,7 @@ import { serializable } from "../../../engine/engine_serialization";
 import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../../engine/debug/debug";
 import { Context } from "../../../engine/engine_setup";
 import { WebARSessionRoot } from "../../webxr/WebARSessionRoot";
+import { hasProLicense } from "../../../engine/engine_license";
 
 const debug = getParam("debugusdz");
 
@@ -37,6 +37,9 @@ export class USDZExporter extends Behaviour {
     @serializable()
     autoExportAnimations: boolean = false;
 
+    @serializable()
+    exportFileName?: string;
+
     @serializable(QuickLookOverlay)
     overlay?: QuickLookOverlay;
 
@@ -72,7 +75,7 @@ export class USDZExporter extends Behaviour {
         if (!this.objectToExport) this.objectToExport = this.gameObject;
 
 
-        if (isDevEnvironment() && (!this.objectToExport || this.objectToExport.children.length <= 0)) {
+        if (isDevEnvironment() && (!this.objectToExport?.children?.length && !(this.objectToExport as Mesh)?.isMesh)) {
             showBalloonWarning("USDZ Exporter has nothing to export");
             console.warn("USDZExporter has no objects to export assigned:", this)
         }
@@ -114,7 +117,7 @@ export class USDZExporter extends Behaviour {
             const scale = 1 / this.webARSessionRoot!.arScale;
             scene.matrix.makeScale(scale, scale, scale);
             if (this.webARSessionRoot.invertForward) {
-                scene.matrix.multiply(new THREE.Matrix4().makeRotationY(Math.PI));
+                scene.matrix.multiply(new Matrix4().makeRotationY(Math.PI));
             }
         }
 
@@ -131,8 +134,9 @@ export class USDZExporter extends Behaviour {
         const eventArgs = { self: this, exporter: exporter, extensions: extensions, object: this.objectToExport };
         this.dispatchEvent(new CustomEvent("before-export", { detail: eventArgs }))
 
-        let name = "needle";
+        let name = this.exportFileName ?? this.objectToExport?.name ?? this.name;
         if (debug) name += "-" + getFormattedDate();
+        else if (!hasProLicense()) name = name + " - Made with Needle";
 
         //@ts-ignore
         exporter.debug = debug;
@@ -152,7 +156,7 @@ export class USDZExporter extends Behaviour {
 
         // see https://developer.apple.com/documentation/arkit/adding_an_apple_pay_button_or_a_custom_action_in_ar_quick_look
         const overlay = this.buildQuicklookOverlay();
-        console.log(overlay);
+        if(debug) console.log(overlay);
         const callToAction = overlay.callToAction ? encodeURIComponent(overlay.callToAction) : "";
         const checkoutTitle = overlay.checkoutTitle ? encodeURIComponent(overlay.checkoutTitle) : "";
         const checkoutSubtitle = overlay.checkoutSubtitle ? encodeURIComponent(overlay.checkoutSubtitle) : "";

package/src/engine-components/ui/EventSystem.ts

@@ -6,14 +6,14 @@ import * as ThreeMeshUI from 'three-mesh-ui'
 import { Context } from "../../engine/engine_setup";
 import { OrbitControls } from "../OrbitControls";
 import { IPointerEventHandler, PointerEventData } from "./PointerEvents";
-import { Raycaster } from "./Raycaster";
+import { ObjectRaycaster, Raycaster } from "./Raycaster";
 import { InputEvents } from "../../engine/engine_input";
 import { Object3D } from "three";
 import { ICanvasGroup, IGraphic } from "./Interfaces";
 import { getParam } from "../../engine/engine_utils";
 import { UIRaycastUtils } from "./RaycastUtils";
 import { $shadowDomOwner } from "./BaseUIComponent";
-import { showBalloonMessage, showBalloonWarning } from "../../engine/debug";
+import { isDevEnvironment, showBalloonMessage, showBalloonWarning } from "../../engine/debug";
 
 const debug = getParam("debugeventsystem");
 
@@ -86,9 +86,15 @@ export class EventSystem extends Behaviour {
     }
 
     start() {
-        // const res = GameObject.findObjectsOfType(Raycaster, this.context);
-        // if (res)
-        //     this.raycaster = [...res];
+        if (this.raycaster.length <= 0) {
+            const res = GameObject.findObjectOfType(Raycaster, this.context);
+            if (!res) {
+                const rc = GameObject.addNewComponent(this.context.scene, ObjectRaycaster);
+                this.raycaster.push(rc);
+                if (isDevEnvironment())
+                    console.warn("Added an ObjectRaycaster to the scene because no raycaster was found", this);
+            }
+        }
     }
 
     register(rc: Raycaster) {

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

@@ -0,0 +1,119 @@
+
+import { IPointerClickHandler, PointerEventData } from "../ui";
+import { Behaviour } from "../Component";
+import { serializable } from "../../engine/engine_serialization";
+import { isDevEnvironment, showBalloonMessage } from "../../engine/debug";
+import { isSafari } from "../../engine/engine_utils";
+import { ObjectRaycaster, Raycaster } from "../ui/Raycaster";
+import { tryGetUIComponent } from "../ui/Utils";
+
+export enum OpenURLMode {
+    NewTab = 0,
+    SameTab = 1,
+    NewWindow = 2
+}
+
+export class OpenURL extends Behaviour implements IPointerClickHandler {
+
+    @serializable()
+    clickable: boolean = true;
+
+    @serializable()
+    url?: string;
+
+    @serializable()
+    mode: OpenURLMode = OpenURLMode.NewTab;
+
+    async open() {
+        if (!this.url) {
+            console.error("URL is not set", this);
+            return;
+        }
+
+        this._validateUrl();
+
+        if (isDevEnvironment()) showBalloonMessage("Open URL: " + this.url)
+
+
+        switch (this.mode) {
+            case OpenURLMode.NewTab:
+                if (isSafari()) {
+                    globalThis.open(this.url, "_blank");
+                }
+                else
+                    globalThis.open(this.url, "_blank");
+                break;
+            case OpenURLMode.SameTab:
+                if (isSafari()) {
+                    globalThis.open(this.url, "_top");
+                }
+                else globalThis.open(this.url, "_self");
+                break;
+            case OpenURLMode.NewWindow:
+                if (isSafari()) {
+                    globalThis.open(this.url, "_top");
+                }
+                else globalThis.open(this.url, "_new");
+                break;
+
+        }
+    }
+
+    start(): void {
+        const raycaster = this.gameObject.getComponentInParent(ObjectRaycaster);
+        if (!raycaster) this.gameObject.addNewComponent(ObjectRaycaster);
+    }
+
+    onEnable(): void {
+        if (isSafari()) window.addEventListener("touchend", this._safariNewTabWorkaround);
+    }
+    onDisable(): void {
+        if (isSafari()) window.removeEventListener("touchend", this._safariNewTabWorkaround);
+    }
+
+    onPointerEnter(args) {
+        if (!args.used && this.clickable)
+            this.context.input.setCursorPointer();
+    }
+    onPointerExit() {
+        if (this.clickable)
+            this.context.input.setCursorNormal();
+    }
+    onPointerClick(args: PointerEventData) {
+        if (this.clickable && !args.used && this.url?.length)
+            this.open();
+    }
+
+    private _safariNewTabWorkaround = () => {
+        if (!this.clickable || !this.url?.length) return;
+        // we only need this workaround for opening a new tab
+        if (this.mode === OpenURLMode.SameTab) return;
+        // When we process the click directly in the browser event we can open a new tab
+        // by emitting a link attribute and calling onClick
+        const raycaster = this.gameObject.getComponentInParent(Raycaster);
+        if (raycaster) {
+            const hits = raycaster.performRaycast();
+            if (!hits) return;
+            for (const hit of hits) {
+                if (hit.object === this.gameObject || tryGetUIComponent(hit.object)?.gameObject === this.gameObject) {
+                    this._validateUrl();
+                    var a = document.createElement('a') as HTMLAnchorElement;
+                    a.setAttribute("target", "_blank");
+                    a.setAttribute("href", this.url);
+                    a.click();
+                    break;
+                }
+            }
+        }
+    }
+
+    private _validateUrl() {
+        if (!this.url) return;
+        if (this.url.startsWith("www.")) {
+            if (isDevEnvironment()) {
+                console.warn("URL is not valid, adding https:// to the start of the URL", this.url);
+            }
+            this.url = "https://" + this.url;
+        }
+    }
+}