@needle-tools/engine 5.1.0-alpha.2 → 5.1.0-alpha.3

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

@@ -170,12 +170,15 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
             this._font = val;
             this.uiObject?.set(this.getTextOpts());
             this.markDirty();
+            // If the font is assigned during deserialization it means the font URL MUST be resolved with the style suffix. If it's assigned at runtime by a user invocation and is absolute then we assume the user is prividing a full path to the font asset json or png
+            this._assignedAtRuntime = this.__didAwake;
         }
     }
     get font(): string | null {
         return this._font;
     }
     private _font: string | null = "https://cdn.needle.tools/static/fonts/msdf/arial/arial";
+    private _assignedAtRuntime: boolean = true;
 
 
     /**
@@ -274,7 +277,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
     }
 
     protected onCreate(_opts: any): void {
-        if (debug) console.log(this);
+        if (debug) console.log("[Text] onCreate", this);
 
         // @marwie : Should be fixed. Currently _opts are always fed with :
         //          backgroundOpacity : color.opacity
@@ -442,7 +445,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
     private feedText(text: string, richText: boolean): void {
         // if (!text || text.length <= 0) return;
         // if (!text ) return;
-        if (debug) console.log("feedText", this.uiObject, text, richText);
+        if (debug) console.log("[Text] feedText", this.uiObject, text, richText);
 
         if (!this.uiObject) return;
         if (!this._textMeshUi)
@@ -603,16 +606,17 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
      * @private
      */
     private setFont(opts: ThreeMeshUIEveryOptions, fontStyle: FontStyle) {
-        
+
         if (!this.font) {
-            if(debug) console.warn("No font set for Text component, skipping font setup");
+            if (debug) console.warn("[Text] No font set for Text component, skipping font setup");
             return;
         }
 
         const fontName = this.font;
+
         const familyName = this.getFamilyNameWithCorrectSuffix(fontName, fontStyle);
 
-        if (debug) console.log("Selected font family:" + familyName, this.font);
+        if (debug) console.log(`[Text] Selected font family '${familyName}' from ${fontName} with style ${FontStyle[fontStyle]}`);
 
         // ensure a font family is register under this name
         let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(familyName as string);
@@ -676,7 +680,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
         // e.g. -Medium, -Black, -Thin...
         const styleName = familyName.substring(styleSeparator + 1)?.toLowerCase();
         if (unsupportedStyleNames.includes(styleName)) {
-            if (debug) console.warn("Unsupported font style: " + styleName);
+            if (debug) console.warn("[Text] Unsupported font style: " + styleName);
             return familyName;
         }
 
@@ -691,12 +695,12 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
         const isUpperCase = fontBaseName[0] === fontBaseName[0].toUpperCase();
         const fontNameWithoutSuffix = familyName.substring(0, styleSeparator > pathSeparatorIndex ? styleSeparator : familyName.length);
 
-        if (debug) console.log("Select font: ", familyName, FontStyle[style], fontBaseName, isUpperCase, fontNameWithoutSuffix);
+        if (debug) console.log("[Text] Select font: ", familyName, FontStyle[style], fontBaseName, isUpperCase, fontNameWithoutSuffix);
 
         /**
          * If a user provides a font with an absolute URL AND the font name does not end with "-msdf.json" or ".png" (e.g. "https://example.com/fonts/Arial-Bold"), we will assume that the user is providing the full path to the font files and we will not try to modify the font name based on the style. This allows users to have more control over the font files they are using, especially if they are hosting their own fonts or using a custom font provider that does not follow the same naming conventions as our default fonts.
          */
-        if (isAbsolute && !(familyName.endsWith("-msdf.json") || familyName.endsWith(".png"))) {
+        if (isAbsolute && this._assignedAtRuntime && !(familyName.endsWith("-msdf.json") || familyName.endsWith(".png"))) {
             return fontNameWithoutSuffix;
         }
 

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

@@ -289,20 +289,28 @@ export class CursorFollow extends Behaviour {
 
 
         if (this.snapToSurface) {
-            ray.origin = _position;
-            ray.direction = rayDirection.multiplyScalar(-1);
-            const hits = this.context.physics.raycastFromRay(ray);
-            if (hits?.length) {
-                const hit = hits[0];
-                if (this.damping > 0) {
-                    this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
-                }
-                else {
-                    this.gameObject.worldPosition = hit.point;
+            ray.origin = cameraPosition;
+            ray.direction = rayDirection;
+            const hits = this.context.physics.raycastFromRay(ray, {
+                testObject: obj => {
+                    return obj !== this.gameObject && !this.gameObject.contains(obj) ? true : false
                 }
-
-                if(debug) {
-                    Gizmos.DrawLine(hit.point, hit.normal!.add(hit.point), 0x00FF00);
+            });
+            if (hits?.length) {
+                // Get the first hit that is not a child of *this* object. Because we do not want to lerp to a surface that is part of the object itself, since that would result in *this* object moving closer and closer to the camera as it tries to snap to itself
+                const hit = hits[0];//.find(h => !this.gameObject.contains(h.object));
+                if (hit) {
+                    if (this.damping > 0) {
+                        this.gameObject.worldPosition = _position.lerp(hit.point, this.context.time.deltaTime / this.damping);
+                        // this._distance = this.gameObject.worldPosition.distanceTo(cameraPosition);
+                    }
+                    else {
+                        this.gameObject.worldPosition = hit.point;
+                        // this._distance = hit.point.distanceTo(cameraPosition);
+                    }
+                    if (debug) {
+                        Gizmos.DrawLine(hit.point, hit.normal!.add(hit.point), 0x00FF00);
+                    }
                 }
             }
         }

package/src/engine-components/webxr/WebXRImageTracking.ts

@@ -886,9 +886,11 @@ async function loadImage(url: string) {
     }
     const promise = new Promise<boolean>(res => {
         _imageElements.set(url, null);
+        if(isDevEnvironment() || debug) console.debug(`[WebXRImageTracking] Start loading image for tracking: ${url}`);
         const imageElement = document.createElement("img") as HTMLImageElement;
         imageElement.src = url;
         imageElement.addEventListener("load", async () => {
+            if(isDevEnvironment() || debug) console.debug(`[WebXRImageTracking] Loaded image for tracking: ${url}`);
             const img = await createImageBitmap(imageElement);
             _imageElements.set(url, img);
             res(true);