Needle Engine 3.47.6-beta

Files changed (11) hide show

plugins/vite/dependency-watcher.js +1 -1
src/engine-components/AudioSource.ts +8 -0
src/engine-components/Camera.ts +4 -0
src/engine-components/DragControls.ts +53 -20
src/engine/engine_create_objects.ts +1 -1
src/engine/engine_math.ts +11 -3
src/engine/engine_scenetools.ts +2 -2
src/engine/engine_three_utils.ts +15 -6
src/engine/engine_utils_screenshot.ts +5 -0
src/engine-components/OrbitControls.ts +9 -2
src/engine-components/SpriteRenderer.ts +119 -12

plugins/vite/dependency-watcher.js CHANGED Viewed

@@ -217,7 +217,7 @@
         // }
         // check if server is running
-        if (server.httpServer.listening) {
+        if (server.httpServer?.listening) {
             server.restart();
         }
         isRunningRestart = false;

src/engine-components/AudioSource.ts CHANGED Viewed

@@ -182,6 +182,14 @@
     private _volume: number = 1;
     @serializable()
+    set pitch(val: number) {
+        if (this.sound) this.sound.setPlaybackRate(val);
+    }
+    get pitch(): number {
+        return this.sound ? this.sound.getPlaybackRate() : 1;
+    }
+    @serializable()
     rollOffMode: AudioRolloffMode = 0;

src/engine-components/Camera.ts CHANGED Viewed

@@ -15,6 +15,7 @@
 /**  The ClearFlags enum is used to determine how the camera clears the background */
 export enum ClearFlags {
+    None = 0,
     /** Clear the background with a skybox */
     Skybox = 1,
     /** Clear the background with a solid color. The alpha channel of the color determines the transparency */
@@ -429,6 +430,9 @@
             console.debug(msg);
         }
         switch (this._clearFlags) {
+            case ClearFlags.None:
+                return;
             case ClearFlags.Skybox:
                 if (Camera.backgroundShouldBeTransparent(this.context)) {
                     if (!this.ARBackgroundAlpha || this.ARBackgroundAlpha < 0.001) {

src/engine-components/DragControls.ts CHANGED Viewed

@@ -98,18 +98,47 @@
     /** When enabled, draws a line from the dragged object downwards to the next raycast hit. */
     @serializable()
     public showGizmo: boolean = false;
     /** The currently dragged object (if any) */
     get draggedObject() {
         return this._targetObject;
     }
+    /**
+     * Use to update the object that is being dragged by the DragControls
+     */
+    setTargetObject(obj: Object3D | null) {
+        this._targetObject = obj;
+        for (const handler of this._dragHandlers.values()) {
+            handler.setTargetObject(obj);
+        }
+        // If the object was kinematic we want to reset it
+        const wasKinematicKey = "_rigidbody-was-kinematic";
+        if (this._rigidbody?.[wasKinematicKey] === false) {
+            this._rigidbody.isKinematic = false;
+        }
+        this._rigidbody = null;
+        // If we have a object that is being dragged we want to get the Rigidbody component
+        // and we set kinematic to false while it's being dragged
+        if (obj) {
+            this._rigidbody = GameObject.getComponentInChildren(obj, Rigidbody);
+            if (this._rigidbody?.isKinematic === false) {
+                this._rigidbody.isKinematic = true;
+                this._rigidbody[wasKinematicKey] = false;
+            }
+        }
+    }
+    private _rigidbody: Rigidbody | null = null;
     // future:
     // constraints?
     /** The object to be dragged – we pass this to handlers when they are created */
-    private _targetObject: GameObject | null = null;
+    private _targetObject: Object3D | null = null;
     private _dragHelper: LegacyDragVisualsHelper | null = null;
     private static lastHovered: Object3D;
     private _draggingRigidbodies: Rigidbody[] = [];
@@ -121,13 +150,6 @@
     private _isDragging: boolean = false;
     private _didDrag: boolean = false;
-    setTargetObject(obj: Object3D | null) {
-        this._targetObject = obj as GameObject;
-        for (const handler of this._dragHandlers.values()) {
-            handler.setTargetObject(obj);
-        }
-    }
     /** @internal */
     awake() {
         // initialize all data that may be cloned incorrectly otherwise
@@ -202,10 +224,13 @@
                 this._totalMovement.set(0, 0, 0);
                 this._potentialDragStartEvt = args;
             }
+            if (!this._targetObject) {
+                this.setTargetObject(this.gameObject);
+            }
             DragControls._active += 1;
-            const newDragHandler = new DragPointerHandler(this, this._targetObject || this.gameObject);
+            const newDragHandler = new DragPointerHandler(this, this._targetObject!);
             this._dragHandlers.set(args.event.space, newDragHandler);
             newDragHandler.onDragStart(args);
@@ -214,9 +239,8 @@
                 const iterator = this._dragHandlers.values();
                 const a = iterator.next().value;
                 const b = iterator.next().value;
-                const mtHandler = new MultiTouchDragHandler(this, this._targetObject || this.gameObject, a, b);
+                const mtHandler = new MultiTouchDragHandler(this, this._targetObject!, a, b);
                 this._dragHandlers.set(this.gameObject, mtHandler);
                 mtHandler.onDragStart(args);
             }
@@ -231,9 +255,7 @@
     /** @internal */
     onPointerUp(args: PointerEventData) {
         if (debug) Gizmos.DrawLabel(args.point ?? this.gameObject.worldPosition, "POINTERUP:" + args.pointerId + ", " + args.button, .03, 3);
         if (!this.allowEdit(this.gameObject)) return;
         if (args.button !== 0) return;
         this._potentialDragStartEvt = null;
@@ -250,6 +272,8 @@
             if (DragControls._active > 0)
                 DragControls._active -= 1;
+            this.setTargetObject(null);
             if (handler.onDragEnd) handler.onDragEnd(args);
             this._dragHandlers.delete(args.event.space);
@@ -388,7 +412,7 @@
     private context: Context;
     private settings: DragControls;
-    private gameObject: GameObject;
+    private gameObject: Object3D;
     private _handlerAAttachmentPoint: Vector3 = new Vector3();
     private _handlerBAttachmentPoint: Vector3 = new Vector3();
@@ -397,7 +421,7 @@
     private _deviceMode!: XRTargetRayMode | "transient-pointer";
     private _followObjectStartWorldQuaternion: Quaternion = new Quaternion();
-    constructor(dragControls: DragControls, gameObject: GameObject, pointerA: DragPointerHandler, pointerB: DragPointerHandler) {
+    constructor(dragControls: DragControls, gameObject: Object3D, pointerA: DragPointerHandler, pointerB: DragPointerHandler) {
         this.context = dragControls.context;
         this.settings = dragControls;
         this.gameObject = gameObject;
@@ -633,7 +657,7 @@
     get hitPointInLocalSpace(): Vector3 { return this._hitPointInLocalSpace; }
     private context: Context;
-    private gameObject: GameObject;
+    private gameObject: Object3D | null;
     private settings: DragControls;
     private _lastRig: IGameObject | undefined = undefined;
@@ -667,10 +691,10 @@
     /** Allows overriding which object is dragged while a drag is already ongoing. Used for example by Duplicatable */
     setTargetObject(obj: Object3D | null) {
-        this.gameObject = obj as GameObject;
+        this.gameObject = obj;
     }
-    constructor(dragControls: DragControls, gameObject: GameObject) {
+    constructor(dragControls: DragControls, gameObject: Object3D) {
         this.settings = dragControls;
         this.context = dragControls.context;
         this.gameObject = gameObject;
@@ -682,6 +706,10 @@
             console.warn("Error: space follow object doesn't have parent but recenter() is called. This is likely a bug");
             return;
         }
+        if (!this.gameObject) {
+            console.warn("Error: space follow object doesn't have a gameObject");
+            return;
+        }
         const p = this._followObject.parent as GameObject;
@@ -721,6 +749,10 @@
     }
     onDragStart(args: PointerEventData) {
+        if (!this.gameObject) {
+            console.warn("Error: space follow object doesn't have a gameObject");
+            return;
+        }
         args.event.space.add(this._followObject);
@@ -1037,7 +1069,8 @@
                 }
             }
             else if (didHaveSurfaceHitPointLastFrame) {
-                this.setPlaneViewAligned(this.gameObject.worldPosition, false)
+                if (this.gameObject)
+                    this.setPlaneViewAligned(this.gameObject.worldPosition, false)
             }
         }

src/engine/engine_create_objects.ts CHANGED Viewed

@@ -148,7 +148,7 @@
      * @returns The created object
      */
     static createOccluder(type: PrimitiveTypeNames): Mesh {
-        const occluderMaterial = new MeshStandardMaterial({ colorWrite: false, depthWrite: true, side: DoubleSide });
+        const occluderMaterial = new MeshBasicMaterial({ colorWrite: false, depthWrite: true, side: DoubleSide });
         return this.createPrimitive(type, { material: occluderMaterial });
     }

src/engine/engine_math.ts CHANGED Viewed

@@ -6,10 +6,18 @@
 class MathHelper {
-    random(min?: number, max?: number): number {
-        if (min !== undefined && max !== undefined) {
-            return Math.random() * (max - min) + min;
+    random<T>(arr: Array<T>): T | null;
+    random(min?: number, max?: number): number;
+    random<T>(arrayOrMin?: number | Array<T>, max?: number): number | T | null {
+        if (Array.isArray(arrayOrMin)) {
+            if(arrayOrMin.length <= 0) return null;
+            return arrayOrMin[Math.floor(Math.random() * arrayOrMin.length)];
         }
+        else {
+            if (arrayOrMin !== undefined && max !== undefined) {
+                return Math.random() * (max - arrayOrMin) + arrayOrMin;
+            }
+        }
         return Math.random();
     }

src/engine/engine_scenetools.ts CHANGED Viewed

@@ -200,7 +200,7 @@
                 }
             }, err => {
-                console.error("failed loading " + path, err);
+                console.error("Loading asset at \"" + path + "\" failed\n", err);
                 resolve(undefined);
             });
         }
@@ -262,7 +262,7 @@
             }, evt => {
                 prog?.call(loader, evt);
             }, err => {
-                console.error("failed loading " + url, err);
+                console.error("Loading asset at \"" + url + "\" failed\n", err);
                 resolve(undefined);
             });
         }

src/engine/engine_three_utils.ts CHANGED Viewed

@@ -73,7 +73,7 @@
 /** Gets a temporary vector. If a vector is passed in it will be copied to the temporary vector
  * Temporary vectors are cached and reused internally. Don't store them!
- * @param vecOrX the vector to copy or the x value
+ * @param vec3 the vector to copy or the x value
  * @param y the y value
  * @param z the z value
  * @returns a temporary vector
@@ -87,15 +87,24 @@
  * const vec5 = getTempVector();
  * ```
  */
-export function getTempVector(vecOrX?: Vector3 | number | DOMPointReadOnly, y?: number, z?: number) {
+export function getTempVector(): Vector3;
+export function getTempVector(vec3: Vector3): Vector3;
+export function getTempVector(vec3: [number, number, number]): Vector3;
+export function getTempVector(dom: DOMPointReadOnly): Vector3;
+export function getTempVector(x: number): Vector3;
+export function getTempVector(x: number, y: number, z: number): Vector3;
+export function getTempVector(vecOrX?: Vector3 | [number, number, number] | DOMPointReadOnly | number, y?: number, z?: number): Vector3 {
     const vec = _tempVecs.get();
     vec.set(0, 0, 0); // initialize with default values
     if (vecOrX instanceof Vector3) vec.copy(vecOrX);
+    else if (Array.isArray(vecOrX)) vec.set(vecOrX[0], vecOrX[1], vecOrX[2]);
     else if (vecOrX instanceof DOMPointReadOnly) vec.set(vecOrX.x, vecOrX.y, vecOrX.z);
     else {
-        if (typeof vecOrX === "number") vec.x = vecOrX;
-        if (typeof y === "number") vec.y = y;
-        if (typeof z === "number") vec.z = z;
+        if (typeof vecOrX === "number") {
+            vec.x = vecOrX;
+            vec.y = y !== undefined ? y : vec.x;
+            vec.z = z !== undefined ? z : vec.x;
+        }
     }
     return vec;
 }
@@ -523,7 +532,7 @@
         if (obj["needle:rendercustomshadow"] === true) {
             return true;
         }
-        else if(obj["needle:rendercustomshadow"] == undefined) {
+        else if (obj["needle:rendercustomshadow"] == undefined) {
             return true;
         }
     }

src/engine/engine_utils_screenshot.ts CHANGED Viewed

@@ -141,6 +141,10 @@
     width /= zoomLevel;
     height /= zoomLevel;
+    // save XR state and reset it for screenshot
+    const previousXRState = context.renderer.xr.enabled;
+    context.renderer.xr.enabled = false;
     // reset style during screenshot
     context.renderer.domElement.style.width = width + "px";
     context.renderer.domElement.style.height = height + "px";
@@ -247,6 +251,7 @@
             camera.aspect = previousAspect;
             camera.updateProjectionMatrix();
         }
+        context.renderer.xr.enabled = previousXRState;
     }
     return null;

src/engine-components/OrbitControls.ts CHANGED Viewed

@@ -311,6 +311,7 @@
         this._activePointerEvents = [];
         this.context.input.addEventListener("pointerdown", this._onPointerDown, { queue: InputEventQueue.Early });
         this.context.input.addEventListener("pointerup", this._onPointerUp, { queue: InputEventQueue.Early });
+        this.context.input.addEventListener("pointerup", this._onPointerUpLate, { queue: InputEventQueue.Late });
     }
     /** @internal */
@@ -327,6 +328,7 @@
         this._activePointerEvents.length = 0;
         this.context.input.removeEventListener("pointerdown", this._onPointerDown);
         this.context.input.removeEventListener("pointerup", this._onPointerUp);
+        this.context.input.removeEventListener("pointerup", this._onPointerUpLate);
     }
     private _activePointerEvents!: NEPointerEvent[];
@@ -373,6 +375,12 @@
         }
     };
+    private _onPointerUpLate = (evt: NEPointerEvent) => {
+        if(this.doubleClickToFocus && evt.isDoubleClick && !evt.used){
+            this.setTargetFromRaycast();
+        }
+    };
     private onControlsChangeStarted = () => {
         if (this._syncedTransform) {
             this._syncedTransform.requestOwnership();
@@ -447,8 +455,7 @@
             }
         }
-        let focusAtPointer = (this.middleClickToFocus && this.context.input.getPointerClicked(1));
-        focusAtPointer ||= (this.doubleClickToFocus && this.context.input.getPointerDoubleClicked(0) && this.context.time.time - this._enableTime > .3);
+        const focusAtPointer = (this.middleClickToFocus && this.context.input.getPointerClicked(1));
         if (focusAtPointer) {
             this.setTargetFromRaycast();
         }

src/engine-components/SpriteRenderer.ts CHANGED Viewed

@@ -1,6 +1,5 @@
 import { BufferAttribute, BufferGeometry, Color, DoubleSide, Material, Mesh, MeshBasicMaterial, NearestFilter, SRGBColorSpace, Texture } from "three";
-import { Context } from "../engine/engine_context.js";
 import { serializable, serializeable } from "../engine/engine_serialization_decorator.js";
 import { getParam } from "../engine/engine_utils.js";
 import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive.js";
@@ -75,6 +74,16 @@
  */
 export class Sprite {
+    constructor(texture?: Texture) {
+        if (texture) {
+            this.texture = texture;
+            this.triangles = [0, 1, 2, 0, 2, 3];
+            this.uv = [{ x: 0, y: 0 }, { x: 1, y: 0 }, { x: 1, y: 1 }, { x: 0, y: 1 }];
+            this.vertices = [{ x: -.5, y: -.5 }, { x: .5, y: -.5 }, { x: .5, y: .5 }, { x: -.5, y: .5 }];
+        }
+    }
     @serializable()
     guid?: string;
     @serializable(Texture)
@@ -140,9 +149,49 @@
 export class SpriteData {
+    static create() {
+        const i = new SpriteData();
+        i.spriteSheet = new SpriteSheet();
+        return i;
+    }
+    // we don't assign anything here because it's used by the serialization system.
+    // there's currently a limitation in the serializer when e.g. spriteSheet is already assigned it will not be overriden by the serializer
+    // hence the spriteSheet field is undefined by default
+    constructor() { }
+    /**
+     * Set the sprite to be rendered in the currently assigned sprite sheet at the currently active index {@link index}
+     */
+    set sprite(sprite: Sprite | undefined) {
+        if (!sprite) {
+            return;
+        }
+        if (!this.spriteSheet) {
+            this.spriteSheet = new SpriteSheet();
+            this.spriteSheet.sprites = [sprite];
+            this.index = 0;
+        }
+        else {
+            if (this.index === null || this.index === undefined) this.index = 0;
+            this.spriteSheet.sprites[this.index] = sprite;
+        }
+    }
+    /** The currently active sprite */
+    get sprite(): Sprite | undefined {
+        if (!this.spriteSheet) return undefined;
+        return this.spriteSheet.sprites[this.index];
+    }
+    /**
+     * The spritesheet holds all sprites that can be rendered by the sprite renderer
+     */
     @serializable(SpriteSheet)
     spriteSheet?: SpriteSheet;
+    /**
+     * The index of the sprite to be rendered in the currently assigned sprite sheet
+     */
     @serializable()
     index: number = 0;
@@ -178,7 +227,7 @@
 }
 /**
- * The sprite renderer renders a sprite on a GameObject using an assigned spritesheet ({@link SpriteData})
+ * The sprite renderer renders a sprite on a GameObject using an assigned spritesheet ({@link SpriteData}).
  */
 export class SpriteRenderer extends Behaviour {
@@ -211,20 +260,67 @@
     @serializable()
     toneMapped: boolean = true;
+    /**
+     * Assign a new texture to the currently active sprite
+     */
+    set texture(value: Texture | undefined) {
+        if (!this._spriteSheet) return;
+        const currentSprite = this._spriteSheet.spriteSheet?.sprites[this.spriteIndex];
+        if (!currentSprite) return;
+        currentSprite.texture = value;
+        this.updateSprite();
+    }
+    /**
+     * Add a new sprite to the currently assigned sprite sheet. The sprite will be added to the end of the sprite sheet.
+     * Note that the sprite will not be rendered by default - set the `spriteIndex` to the index of the sprite to be rendered.
+     * @param sprite The sprite to be added
+     * @returns The index of the sprite in the sprite sheet
+     * @example
+     * ```typescript
+     * const spriteRenderer = gameObject.addComponent(SpriteRenderer);
+     * const index = spriteRenderer.addSprite(mySprite);
+     * if(index >= 0)
+     *   spriteRenderer.spriteIndex = index;
+     * ```
+     */
+    addSprite(sprite: Sprite, setActive: boolean = false): number {
+        if (!this._spriteSheet) {
+            this._spriteSheet = SpriteData.create();
+        }
+        if (!this._spriteSheet.spriteSheet) return -1;
+        this._spriteSheet.spriteSheet?.sprites.push(sprite);
+        const index = this._spriteSheet.spriteSheet?.sprites.length - 1;
+        if (setActive) {
+            this.spriteIndex = index;
+        }
+        return index;
+    }
+    /**
+     * Get the currently active sprite
+     */
     @serializable(SpriteData)
     get sprite(): SpriteData | undefined {
         return this._spriteSheet;
     }
     /**
-     * Set a new sprite sheetsheet or update the index of the sprite to be rendered in the currently assigned sprite sheet
+     * Set the sprite to be rendered in the currently assigned sprite sheet at the currently active index {@link spriteIndex}
      */
-    set sprite(value: SpriteData | undefined | number) {
+    set sprite(value: Sprite | SpriteData | undefined | number) {
         if (value === this._spriteSheet) return;
         if (typeof value === "number") {
             const index = Math.floor(value);
             this.spriteIndex = index;
             return;
         }
+        else if (value instanceof Sprite) {
+            if (!this._spriteSheet) {
+                this._spriteSheet = SpriteData.create();
+            }
+            this._spriteSheet.sprite = value;
+            this.updateSprite();
+        }
         else {
             this._spriteSheet = value;
             this.updateSprite();
@@ -236,6 +332,7 @@
      */
     set spriteIndex(value: number) {
         if (!this._spriteSheet) return;
+        if (value === this.spriteIndex) return;
         this._spriteSheet.index = value;
         this.updateSprite();
     }
@@ -255,6 +352,10 @@
     /** @internal */
     awake(): void {
         this._currentSprite = undefined;
+        if (!this._spriteSheet) {
+            this._spriteSheet = new SpriteData();
+            this._spriteSheet.spriteSheet = new SpriteSheet();
+        }
         if (debug) {
             console.log("Awake", this.name, this, this.sprite);
         }
@@ -270,19 +371,24 @@
     /**
      * Update the sprite. Modified properties will be applied to the sprite mesh. This method is called automatically when the sprite is changed.
+     * @param force If true, the sprite will be forced to update.
+     * @returns True if the sprite was updated successfully
      */
-    updateSprite(force: boolean = false) {
-        if (!this.__didAwake && !force) return;
-        if (!this.sprite?.spriteSheet?.sprites) return;
-        const sprite = this.sprite.spriteSheet.sprites[this.spriteIndex];
+    updateSprite(force: boolean = false): boolean {
+        if (!this.__didAwake && !force) return false;
+        const data = this._spriteSheet;
+        if (!data?.spriteSheet?.sprites) {
+            console.warn("SpriteRenderer has no data or spritesheet assigned...");
+            return false;
+        }
+        const sprite = data.spriteSheet.sprites[this.spriteIndex];
         if (!sprite) {
             if (debug)
-                console.warn("Sprite not found", this.spriteIndex, this.sprite.spriteSheet.sprites);
-            return;
+                console.warn("Sprite not found", this.spriteIndex, data.spriteSheet.sprites);
+            return false;
         }
         if (!this._currentSprite) {
             const mat = new MeshBasicMaterial({ color: 0xffffff, side: DoubleSide });
-            if (!mat) return;
             if (showWireframe)
                 mat.wireframe = true;
             if (this.color) {
@@ -330,6 +436,7 @@
             this.sharedMaterial.transparent = this.transparent;
         }
         this._currentSprite.castShadow = this.castShadows;
-        this._spriteSheet?.update( this.sharedMaterial);
+        data?.update(this.sharedMaterial);
+        return true;
     }
 }