@needle-tools/engine 4.11.0-beta.1 → 4.11.0-next.687516a

package/src/engine-components/DropListener.ts

@@ -1,23 +1,22 @@
-import { AxesHelper, Box3, Cache, Object3D, Vector2, Vector3 } from "three";
+import { Box3, Object3D, Vector2, Vector3 } from "three";
 
 import { isDevEnvironment } from "../engine/debug/index.js";
 import { AnimationUtils } from "../engine/engine_animation.js";
-import { addComponent } from "../engine/engine_components.js";
 import { Context } from "../engine/engine_context.js";
 import { destroy } from "../engine/engine_gameobject.js";
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { getLoader } from "../engine/engine_gltf.js";
 import { BlobStorage } from "../engine/engine_networking_blob.js";
 import { PreviewHelper } from "../engine/engine_networking_files.js";
-import { generateSeed, InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
+import { InstantiateIdProvider } from "../engine/engine_networking_instantiate.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { fitObjectIntoVolume, getBoundingBox, placeOnSurface } from "../engine/engine_three_utils.js";
-import { IGameObject, Model, Vec3 } from "../engine/engine_types.js";
+import { Model, Vec3 } from "../engine/engine_types.js";
 import { getParam, setParamWithoutReload } from "../engine/engine_utils.js";
 import { determineMimeTypeFromExtension } from "../engine/engine_utils_format.js";
-import { Animation } from "./Animation.js";
 import { Behaviour } from "./Component.js";
 import { EventList } from "./EventList.js";
+import { Renderer } from "./Renderer.js";
 
 /**
  * Debug mode can be enabled with the URL parameter `?debugdroplistener`, which
@@ -116,6 +115,8 @@ const blobKeyName = "blob";
  * If {@link useNetworking} is enabled, the DropListener will automatically synchronize dropped files to other connected clients.
  * Enable {@link fitIntoVolume} to automatically scale dropped objects to fit within the volume defined by {@link fitVolumeSize}.
  * 
+ * - Example: [DropListener Sample](https://droplistener-zubcksz1veaoo.needle.run/)
+ * 
  * The following events are dispatched by the DropListener:
  * - **object-added** - dispatched when a new object is added to the scene
  * - **file-dropped** - dispatched when a file is dropped into the scene
@@ -214,7 +215,14 @@ export class DropListener extends Behaviour {
     }
 
 
-
+    awake() {
+        for (const ch of this.gameObject.children) {
+            if (this.dropArea && ch.contains(this.dropArea)) {
+                continue;
+            }
+            this._addedObjects.push(ch);
+        }
+    }
 
     // #region internals
 
@@ -223,7 +231,15 @@ export class DropListener extends Behaviour {
         this.context.renderer.domElement.addEventListener("dragover", this.onDrag);
         this.context.renderer.domElement.addEventListener("drop", this.onDrop);
         window.addEventListener("paste", this.handlePaste);
-        this.context.connection.beginListen("droplistener", this.onNetworkEvent)
+        this.context.connection.beginListen("droplistener", this.onNetworkEvent);
+        if (isDevEnvironment()) {
+            if (this.dropArea) {
+                const anyRenderer = this.dropArea.getComponentInChildren(Renderer);
+                if (!anyRenderer) {
+                    console.warn("[DropListener] The assigned DropArea does not seem to have a renderer/mesh. Drag and Drop events will not be detected.");
+                }
+            }
+        }
     }
     /** @internal */
     onDisable(): void {
@@ -473,7 +489,7 @@ export class DropListener extends Behaviour {
         if (doDestroy) {
             for (const prev of this._addedObjects) {
                 if (prev.parent === this.gameObject) {
-                    destroy(prev, true, true);
+                    prev.destroy();
                 }
             }
         }
@@ -596,24 +612,28 @@ export class DropListener extends Behaviour {
      * @returns True if the drop is valid (either no drop area is set or the drop occurred inside it)
      */
     private testIfIsInDropArea(ctx: DropContext): boolean {
+        const screenPoint = this.context.input.convertScreenspaceToRaycastSpace(ctx.screenposition.clone());
+        const hits = this.context.physics.raycast({
+            screenPoint,
+            recursive: true,
+            testObject: obj => {
+                // Ignore hits on the already added objects, they don't count as part of the dropzone
+                if (this._addedObjects.some(o => o.contains(obj))) return false;
+                return true;
+            }
+        });
+        if (!hits.length) {
+            if (isDevEnvironment()) console.log(`Dropped outside of drop area for DropListener \"${this.name}\".`);
+            return false;
+        }
+
+        const hit = hits[0];
         if (this.dropArea) {
-            const screenPoint = this.context.input.convertScreenspaceToRaycastSpace(ctx.screenposition.clone());
-            const hits = this.context.physics.raycast({
-                targets: [this.dropArea],
-                screenPoint,
-                recursive: true,
-                testObject: obj => {
-                    // Ignore hits on the already added objects, they don't count as part of the dropzone
-                    if (this._addedObjects.includes(obj)) return false;
-                    return true;
-                }
-            });
-            if (!hits.length) {
-                if (isDevEnvironment()) console.log(`Dropped outside of drop area for DropListener \"${this.name}\".`);
-                return false;
+            if (this.dropArea.contains(hit.object)) {
+                return true;
             }
         }
-        return true;
+        return false;
     }
 
 }

package/src/engine-components/Duplicatable.ts

@@ -12,8 +12,8 @@ import { type IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.
 import { ObjectRaycaster } from "./ui/Raycaster.js";
 
 /**
- * The Duplicatable component is used to duplicate a assigned {@link GameObject} when a pointer event occurs on the GameObject.  
- * It implements the {@link IPointerEventHandler} interface and can be used to expose duplication to the user in the editor without writing code.
+ * The Duplicatable component is used to duplicate a assigned {@link GameObject} when a pointer event occurs on the object.   
+ *  
  * @category Interactivity
  * @group Components
  */

package/src/engine-components/EventList.ts

@@ -97,7 +97,24 @@ export class EventListEvent<TArgs extends any> extends Event { //implements Arra
 
 
 /**
- * The EventList is a class that can be used to create a list of event listeners that can be invoked
+ * The EventList is a class that can be used to create a list of event listeners that can be invoked.  
+ * 
+ * @example
+ * ```ts
+ * // create an event list
+ * const onClick = new EventList<(event: MouseEvent) => void>();
+ * 
+ * // add an event listener
+ * onClick.addEventListener((event) => {
+ *   console.log("Clicked!", event);
+ * });
+ * 
+ * // invoke the event list
+ * onClick.invoke(new MouseEvent("click"));
+ * ```
+ * 
+ * @category Events
+ * @group Utilities
  */
 export class EventList<TArgs extends any = any> implements IEventList {
 

package/src/engine-components/GroundProjection.ts

@@ -10,7 +10,10 @@ import { Behaviour } from "./Component.js";
 const debug = getParam("debuggroundprojection");
 
 /**
- * GroundProjectedEnv creates a ground projection of the current environment map.  
+ * GroundProjectedEnv creates a ground projection of the current environment map.    
+ * 
+ * - Example https://engine.needle.tools/samples/ground-projection
+ * 
  * @category Rendering
  * @group Components
  */

package/src/engine-components/Interactable.ts

@@ -10,6 +10,9 @@ export class UsageMarker extends Behaviour
     public usedBy: any = null;
 }
 
-
+/**
+ * An empty component that can be used to mark an object as interactable.
+ * @group Components
+ */
 /** @deprecated */
 export class Interactable extends Behaviour {}

package/src/engine-components/OrbitControls.ts

@@ -255,7 +255,12 @@ export class OrbitControls extends Behaviour implements ICameraController {
      * @default 1
      */
     @serializable()
-    targetLerpDuration = 1;
+    get targetLerpDuration() { return this._lookTargetLerpDuration; }
+    set targetLerpDuration(v) { this._lookTargetLerpDuration = v; }
+    private _lookTargetLerpDuration: number = 1;
+
+    @serializable(Object3D)
+    targetBounds: Object3D | null = null;
 
     /**
      * Rotate the camera left (or right) by the specified angle in radians.   
@@ -326,7 +331,6 @@ export class OrbitControls extends Behaviour implements ICameraController {
     private _lookTargetStartPosition: Vector3 = new Vector3();
     private _lookTargetEndPosition: Vector3 = new Vector3();
     private _lookTargetLerp01: number = 0;
-    private _lookTargetLerpDuration: number = 0;
 
     private _cameraLerpActive: boolean = false;
     private _cameraStartPosition: Vector3 = new Vector3();
@@ -685,6 +689,26 @@ export class OrbitControls extends Behaviour implements ICameraController {
             }
         }
 
+        if (this.targetBounds) {
+            // #region target bounds
+            const targetVector = this._controls.target;
+            const boundsCenter = this.targetBounds.worldPosition;
+            const boundsHalfSize = getTempVector(this.targetBounds.worldScale).multiplyScalar(0.5);
+            const min = getTempVector(boundsCenter).sub(boundsHalfSize);
+            const max = getTempVector(boundsCenter).add(boundsHalfSize);
+            const newTarget = getTempVector(this._controls.target).clamp(min, max);
+            const duration = .1;
+            if (duration <= 0) targetVector.copy(newTarget);
+            else targetVector.lerp(newTarget, this.context.time.deltaTime / duration);
+            if (this._lookTargetLerpActive) {
+                if (duration <= 0) this._lookTargetEndPosition.copy(newTarget);
+                else this._lookTargetEndPosition.lerp(newTarget, this.context.time.deltaTime / (duration * 5));
+            }
+            if (debug) {
+                Gizmos.DrawWireBox(boundsCenter, boundsHalfSize.multiplyScalar(2), 0xffaa00);
+            }
+        }
+
 
         if (this._controls) {
             if (this.debugLog)
@@ -1000,7 +1024,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
     */
     fitCamera(options?: OrbitFitCameraOptions);
     /** @deprecated Use fitCamera(options) */
-    fitCamera(objects?: Object3D | Array<Object3D>, options?: Omit<OrbitFitCameraOptions, "objects">);    
+    fitCamera(objects?: Object3D | Array<Object3D>, options?: Omit<OrbitFitCameraOptions, "objects">);
     fitCamera(objectsOrOptions?: Object3D | Array<Object3D> | OrbitFitCameraOptions, options?: OrbitFitCameraOptions): void {
 
 

package/src/engine-components/RigidBody.ts

@@ -134,7 +134,12 @@ class TransformWatch {
 }
 
 /**
- * A Rigidbody is used together with a Collider to create physical interactions between objects in the scene. 
+ * A Rigidbody is used together with a Collider to create physical interactions between objects in the scene.   
+ * 
+ * - Example: https://samples.needle.tools/physics-basic
+ * - Example: https://samples.needle.tools/physics-playground
+ * - Example: https://samples.needle.tools/physics-&-animation
+ * 
  * @category Physics 
  * @group Components
  */

package/src/engine-components/SeeThrough.ts

@@ -1,11 +1,14 @@
-import { Material, Object3D, Vector3 } from "three";
+import { Material, Object3D, Object3DEventMap, Vector3 } from "three";
 
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization_decorator.js";
 import { getTempVector } from "../engine/engine_three_utils.js";
 import { getParam } from "../engine/engine_utils.js";
+import { USDObject, USDZExporterContext } from "./api.js";
 import { Behaviour } from "./Component.js";
+import { IUSDExporterExtension } from "./export/usdz/Extension.js";
+import { USDZExporter } from "./export/usdz/USDZExporter.js";
 import { Renderer } from "./Renderer.js";
 
 const debugSeeThrough = getParam("debugseethrough");
@@ -102,6 +105,7 @@ export class SeeThrough extends Behaviour {
     onEnable() {
         this._needsUpdate = true;
         this._renderer = null;
+        SeeThroughUsdzExporterPlugin.components.push(this);
     }
 
     /**  @internal */
@@ -118,6 +122,9 @@ export class SeeThrough extends Behaviour {
             this.rendererMaterials.delete(r);
             this.rendererMaterialsOriginal.delete(r);
         });
+
+        const index = SeeThroughUsdzExporterPlugin.components.indexOf(this);
+        if (index !== -1) SeeThroughUsdzExporterPlugin.components.splice(index, 1);
     }
 
     /**
@@ -253,4 +260,37 @@ export class SeeThrough extends Behaviour {
         });
     }
 
-}
+}
+
+
+;
+class SeeThroughUsdzExporterPlugin implements IUSDExporterExtension {
+
+    static readonly components: SeeThrough[] = [];
+
+    get extensionName() {
+        return "SeeThrough";
+    }
+
+    // onExportObject(object: Object3D<Object3DEventMap>, model: USDObject, context: USDZExporterContext) {
+    //     const component = SeeThroughUsdzExporterPlugin.components.find(c => c.gameObject === object);
+    //     if(!component) return;
+    //     console.log("OH MY GOD SEE THROUGH USDZ EXPORTER", component, model);
+
+    //     model.materialName = "AlphaHashMaterialInstance"; // we could make this unique per object if needed
+
+    //     model.addEventListener("serialize", (writer, context) => {
+    //         writer.appendLine(`# SeeThrough component on ${object.name}`);
+    //     });
+    // }
+
+}
+
+const seeThroughUsdzExporterPlugin = new SeeThroughUsdzExporterPlugin();
+
+USDZExporter.beforeExport.addEventListener(args => {
+    if (SeeThroughUsdzExporterPlugin.components.length === 0) return;
+    if (args.exporter.extensions.includes(seeThroughUsdzExporterPlugin) === false) {
+        args.exporter.extensions.push(seeThroughUsdzExporterPlugin);
+    }
+});

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

@@ -112,6 +112,10 @@ const PositionIdentity = new Vector3();
 const QuaternionIdentity = new Quaternion();
 const ScaleIdentity = new Vector3(1,1,1);
 
+// #region USDObject
+
+type USDObjectEventType = "serialize" & ({} & string);
+
 class USDObject {
 
 	static USDObject_export_id = 0;
@@ -153,12 +157,13 @@ class USDObject {
 	private set isDynamic( value ) { this._isDynamic = value; }
 	geometry: BufferGeometry | null;
 	material: MeshStandardMaterial | MeshBasicMaterial | Material | MeshPhysicalNodeMaterial | null;
+	// usdMaterial?: USDMaterial;
 	camera: PerspectiveCamera | OrthographicCamera | null;
 	parent: USDObject | null;
 	skinnedMesh: SkinnedMesh | null;
 	children: Array<USDObject | null> = [];
 	animations: AnimationClip[] | null;
-	_eventListeners: {};
+	_eventListeners: Record<USDObjectEventType, Function[]>;
 
 	// these are for tracking which xformops are needed
 	needsTranslate: boolean = false;
@@ -201,7 +206,7 @@ class USDObject {
 		this.camera = camera;
 		this.parent = null;
 		this.children = [];
-		this._eventListeners = {};
+		this._eventListeners = {} as Record<USDObjectEventType, Function[]>;
 		this._isDynamic = false;
 		this.skinnedMesh = skinnedMesh;
 		this.animations = animations;
@@ -287,7 +292,7 @@ class USDObject {
 
 	}
 
-	addEventListener( evt, listener: ( writer: USDWriter, context: USDZExporterContext ) => void ) {
+	addEventListener( evt : USDObjectEventType, listener: ( writer: USDWriter, context: USDZExporterContext ) => void ) {
 
 		if ( ! this._eventListeners[ evt ] ) this._eventListeners[ evt ] = [];
 		this._eventListeners[ evt ].push( listener );
@@ -316,6 +321,67 @@ class USDObject {
 }
 
 
+// #region USDMaterial
+
+// class MaterialInput {
+// 	name: string;
+// }
+
+class USDMaterial {
+
+	static USDMaterial_id = 0;
+
+	readonly material: Material;
+	readonly id: number;
+
+	name: string;
+
+	isOverride: boolean = false;
+	isInstanceable: boolean = false;
+
+	constructor( material: Material ) {
+		this.material = material;
+		this.id = USDMaterial.USDMaterial_id ++;
+		this.name = makeNameSafe( material.name || 'Material_' + this.id );
+	}
+
+	readonly inputs: Record<string, string | number | boolean | number[] | undefined> = {};
+
+	// addInput( name: string, value: "" ) {
+
+
+
+	// }
+
+
+	serialize( writer: USDWriter, _context: USDZExporterContext ) {
+
+		const name = this.name;
+
+		writer.appendLine( `def Material "${this.name}" ${name ?`( displayName = "${makeDisplayNameSafe(name)}" )` : ''}` );
+		writer.beginBlock();
+			
+
+		writer.closeBlock();
+		
+		// def Material "${materialName}" ${material.name ?`(
+		// 	displayName = "${material.name}"
+		// )` : ''}
+		// {
+		// 	token outputs:mtlx:surface.connect = ${materialRoot}/${materialName}/Occlusion.outputs:out>
+
+		// 	def Shader "Occlusion"
+		// 	{
+		// 		uniform token info:id = "${mode}"
+		// 		token outputs:out
+		// 	}
+		// }`;
+	
+	}
+}
+
+// #region USDDocument
+
 class USDDocument extends USDObject {
 
 	stageLength: number;
@@ -448,6 +514,7 @@ ${comments}
 
 }
 
+
 const newLine = '\n';
 const materialRoot = '</StageRoot/Materials';
 
@@ -540,6 +607,8 @@ class USDWriter {
 
 declare type TextureMap = {[name: string]: {texture: Texture, scale?: Vector4}};
 
+// #region USDZExporterContext
+
 class USDZExporterContext {
 	root?: Object3D;
 	exporter: USDZExporter;
@@ -576,6 +645,10 @@ class USDZExporterContext {
 
 	}
 
+	makeNameSafe( str ) {
+		return makeNameSafe( str );
+	}
+
 }
 
 /**[documentation](https://developer.apple.com/documentation/arkit/usdz_schemas_for_ar/preliminary_anchoringapi/preliminary_anchoring_type) */
@@ -597,6 +670,8 @@ class USDZExporterOptions {
 	exportInvisible: boolean = false;
 }
 
+// #region USDZExporter
+
 class USDZExporter {
 	debug: boolean;
 	pruneUnusedNodes: boolean;
@@ -698,13 +773,7 @@ class USDZExporter {
 		}
 
 		Progress.report('export-usdz', { message: "Parsing document", autoStep: 10 });
-		await parseDocument( context, () => {
-			// injected after stageRoot.
-			// TODO property use context/writer instead of string concat
-			Progress.report('export-usdz', "Building materials");
-			const result = buildMaterials( materials, textures, options.quickLookCompatible );
-			return result;
-		} );
+		await parseDocument( context, options );
 
 		Progress.report("export-usdz", "Invoking onAfterSerialize");
 		await invokeAll( context, 'onAfterSerialize' );
@@ -726,7 +795,7 @@ class USDZExporter {
 		const final = header + '\n' + context.output;
 
 		// full output file
-		if ( this.debug ) console.log( final );
+		if ( this.debug ) console.debug( final );
 
 		files[ modelFileName ] = fflate.strToU8( final );
 		context.output = '';
@@ -822,6 +891,9 @@ class USDZExporter {
 
 }
 
+// #endregion
+
+// #region traverse 
 function traverse( object: Object3D, parentModel: USDObject, context: USDZExporterContext, keepObject?: (object: Object3D) => boolean ) {
 
 	if (!context.exportInvisible && !object.visible) return;
@@ -919,6 +991,8 @@ function traverse( object: Object3D, parentModel: USDObject, context: USDZExport
 
 }
 
+// #endregion
+
 function logUsdHierarchy( object: USDObject, prefix: string, ...extraLogObjects: any[] ) { 
 
 	const item = {};
@@ -1020,7 +1094,8 @@ function prune ( object: USDObject, options : {
 	return canBePruned;
 }
 
-async function parseDocument( context: USDZExporterContext, afterStageRoot: () => string ) {
+// #region parseDocument
+async function parseDocument( context: USDZExporterContext, options: USDZExporterOptions ) {
 
 	Progress.start("export-usdz-resources", "export-usdz");
 	const resources: Array<() => void> = [];
@@ -1086,14 +1161,21 @@ async function parseDocument( context: USDZExporterContext, afterStageRoot: () =
 
 	writer.closeBlock();
 	writer.closeBlock();
-	writer.appendLine(afterStageRoot());
+	
+	// TODO property use context/writer instead of string concat
+	Progress.report('export-usdz', "Building materials");
+	const result = buildMaterials( context.materials, context.textures, options.quickLookCompatible );
+	writer.appendLine(result);
+
 	writer.closeBlock();
 
 	Progress.report("export-usdz", "write to string")
 	context.output += writer.toString();
 
 }
+// #endregion
 
+// #region addResources
 function addResources( object: USDObject | null, context: USDZExporterContext, resources: Array<() => void>) {
 
 	if ( !object ) return;
@@ -1132,7 +1214,7 @@ function addResources( object: USDObject | null, context: USDZExporterContext, r
 
 	if ( material ) {
 		
-		if ( ! ( material.uuid in context.materials ) ) {
+		if ( context.materials.get( material.uuid ) === undefined ) {
 
 			context.materials[ material.uuid ] = material;
 
@@ -1169,6 +1251,10 @@ async function invokeAll( context: USDZExporterContext, name: string, writer: US
 	}
 
 }
+
+// #endregion
+
+// #region GPU utils
 let _renderer: WebGLRenderer | null = null;
 let renderTarget: WebGLRenderTarget | null = null;
 let fullscreenQuadGeometry: PlaneGeometry | null;
@@ -1431,7 +1517,9 @@ function getPathToSkeleton(bone: Object3D, assumedRoot: Object3D) {
 	return path;
 }
 
-// Xform
+// #endregion
+
+// #region XForm
 
 export function buildXform( model: USDObject | null, writer: USDWriter, context: USDZExporterContext ) {
 
@@ -1635,7 +1723,7 @@ function buildMatrixRow( array, offset ) {
 
 }
 
-// Mesh
+// #region Mesh
 
 function buildMeshObject( geometry: BufferGeometry, bonesArray: Bone[] = [], quickLookCompatible: boolean = true) {
 
@@ -1948,7 +2036,9 @@ function buildVector2Array( attribute: BufferAttribute | InterleavedBufferAttrib
 
 }
 
-// Materials
+// #endregion
+
+// #region Materials
 
 function buildMaterials( materials: Map<string, Material>, textures: TextureMap, quickLookCompatible = false ) {
 
@@ -2103,10 +2193,14 @@ function buildTexture( texture: Texture, mapType: MapType, quickLookCompatible:
 		}`;
 }
 
+
 function buildMaterial( material: MeshBasicMaterial, textures: TextureMap, quickLookCompatible = false ) {
 
 	const materialName = getMaterialName(material);
 
+	// TODO: refactor to USDMaterial class
+	// const usdMaterial = new USDMaterial(material);
+
 	// Special case: occluder material
 	// Supported on iOS 18+ and visionOS 1+
 	const isShadowCatcherMaterial = 
@@ -2330,6 +2424,7 @@ function buildMaterial( material: MeshBasicMaterial, textures: TextureMap, quick
 		}
 	}
 
+
 	return `
 
 		def Material "${materialName}" ${material.name ?`(
@@ -2368,6 +2463,8 @@ ${samplers.join( '\n' )}` : ''}
 		}`;
 }
 
+// #endregion
+
 function buildColor( color ) {
 
 	return `(${color.r}, ${color.g}, ${color.b})`;
@@ -2407,6 +2504,9 @@ const formatsWithAlphaChannel = [
 	36492, // RGBA_BPTC_Format
 ];
 
+
+// #region exports
+
 export { 
 	buildMatrix,
 	decompressGpuTexture,

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

@@ -284,7 +284,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
         return opts;
     }
 
-    private feedText(text: string, richText: boolean) : void {
+    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);
@@ -511,6 +511,15 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
     }
 
     private getFamilyNameWithCorrectSuffix(familyName: string, style: FontStyle): string {
+
+
+        // the URL decorator resolves the URL to absolute URLs - we need to remove the domain part since we're only interested in the path
+        if (familyName.startsWith("https:") || familyName.startsWith("http:")) {
+            const url = new URL(familyName);
+            familyName = url.pathname;
+        }
+
+
         // we can only change the style for the family if the name has a suffix (e.g. Arial-Bold)
         const styleSeparator = familyName.lastIndexOf('-');
         if (styleSeparator < 0) return familyName;
@@ -532,7 +541,7 @@ export class Text extends Graphic implements IHasAlphaFactor, ICanvasEventReceiv
             fontBaseName = fontBaseName.substring(pathSeparatorIndex + 1);
         }
         const isUpperCase = fontBaseName[0] === fontBaseName[0].toUpperCase();
-        const fontNameWithoutSuffix = familyName.substring(0, styleSeparator);
+        const fontNameWithoutSuffix = familyName.substring(0, styleSeparator > pathSeparatorIndex ? styleSeparator : familyName.length);
         if (debug) console.log("Select font: ", familyName, FontStyle[style], fontBaseName, isUpperCase, fontNameWithoutSuffix);
 
         switch (style) {

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

@@ -11,6 +11,9 @@ import { Behaviour } from "../Component.js";
 /**
  * LookAt behaviour makes the object look at a target object or the camera.  
  * It can also invert the forward direction and keep the up direction.
+ * 
+ * @category Interactivity, Everywhere Actions
+ * @group Components
  */
 export class LookAt extends Behaviour implements UsdzBehaviour {