@needle-tools/engine 2.62.1-pre → 2.62.2-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.62.1-pre",
+    "version": "2.62.2-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "dist/needle-engine.js",

package/src/engine/api.ts

@@ -8,4 +8,5 @@ export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"
 export { Gizmos } from "./engine_gizmos"
 export * from "./engine_scenetools";
-export * from "./engine_math"
+export * from "./engine_math"
+export * from "./js-extensions"

package/src/engine/engine.ts

@@ -1,8 +1,5 @@
 import "./engine_hot_reload"
 
-import * as layers from "./js-extensions/Layers";
-layers.patchLayers();
-
 import * as engine_setup from "./engine_setup";
 import * as engine_scenetools from "./engine_scenetools";
 import "./tests/test_utils";

package/src/engine/engine_camera.ts

@@ -0,0 +1,18 @@
+import { ICameraController } from "./engine_types";
+import { Camera } from "three";
+
+
+const $cameraController = Symbol("cameraController");
+
+export function getCameraController(cam: Camera): ICameraController | null {
+    return cam[$cameraController];
+}
+
+export function setCameraController(cam: Camera, cameraController: ICameraController, active: boolean) {
+    if (active)
+        cam[$cameraController] = cameraController;
+    else{
+        if(cam[$cameraController] === cameraController)
+            cam[$cameraController] = null;
+    }
+}

package/src/engine/engine_element.ts

@@ -79,6 +79,12 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     public get loadingProgress01(): number { return this._loadingProgress01; }
     public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
 
+    public get cameraControls(): boolean {
+        const attr = this.getAttribute("camera-controls");
+        if(attr === null || attr === "False" || attr === "false" || attr === "0") return false;
+        return true;
+    }
+
     public getContext(): Promise<Context> {
         return new Promise((res, _rej) => {
             if (this._context && this.loadingFinished) {
@@ -237,7 +243,17 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     }
 
     static get observedAttributes() {
-        return ["hash", "src", "loadstart", "progress", "loadfinished", "dracoDecoderPath", "dracoDecoderType", "ktx2DecoderPath"];
+        return [
+            "hash",
+            "src",
+            "camera-controls",
+            "loadstart",
+            "progress",
+            "loadfinished",
+            "dracoDecoderPath",
+            "dracoDecoderType",
+            "ktx2DecoderPath"
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {

package/src/engine/engine_input.ts

@@ -220,6 +220,7 @@ export class Input extends EventTarget {
     private _pointerPositionDown: THREE.Vector2[] = [new THREE.Vector2()];
     private _pointerDownTime: number[] = [];
     private _pointerUpTime: number[] = [];
+    private _pointerUpTimestamp: number[] = [];
     private _pointerIds: number[] = [];
     private _pointerTypes: string[] = [""];
     private _mouseWheelChanged: boolean[] = [false];
@@ -411,13 +412,15 @@ export class Input extends EventTarget {
         }
     }
 
-    private onTouchUp(evt) {
+    private onTouchUp(evt: TouchEvent) {
         if (evt.changedTouches.length <= 0) return;
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
-            if (debug)
-                showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
+            const id = this.getPointerIndex(touch.identifier);
+
+            if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
+
+            if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
             const args: PointerEventArgs = { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, source: evt };
             this.onUp(args);
         }
@@ -440,11 +443,20 @@ export class Input extends EventTarget {
     private onMouseUp(evt: MouseEvent) {
         if (evt.defaultPrevented) return;
         let i = evt.button;
+        if (!this.isNewEvent(evt.timeStamp, i, this._pointerUpTimestamp)) return;
         this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }
 
+    // Prevent the same event being handled twice (e.g. on touch we get a mouseUp and touchUp evt with the same timestamp)
+    private isNewEvent(timestamp: number, index: number, arr: number[]): boolean {
+        while (arr.length <= index) arr.push(-1);
+        if (timestamp === arr[index]) return false;
+        arr[index] = timestamp;
+        return true;
+    }
+
     private isInRect(e: { clientX: number, clientY: number }): boolean {
-        if(this.context.isInXR) return true;
+        if (this.context.isInXR) return true;
         const rect = this.context.domElement.getBoundingClientRect();
         const px = e.clientX;
         const py = e.clientY;

package/src/engine/engine_setup.ts

@@ -504,7 +504,6 @@ export class Context implements IContext {
 			this.domElement.prepend(this.renderer.domElement);
 
 		Context._current = this;
-		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 
 		// Setup
 		Context._current = this;
@@ -591,6 +590,8 @@ export class Context implements IContext {
 
 		if (debug)
 			logHierarchy(this.scene, true);
+
+		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 	}
 
 	private render(_, frame) {

package/src/engine/engine_types.ts

@@ -30,10 +30,11 @@ export declare type CoroutineData = {
 export interface IContext {
     alias?: string | null;
 
-    scene : Scene;
-    renderer : WebGLRenderer;
-    mainCamera : Camera | null;
-    domElement : HTMLElement;
+    scene: Scene;
+    renderer: WebGLRenderer;
+    mainCamera: Camera | null;
+    mainCameraComponent: ICamera | undefined;
+    domElement: HTMLElement;
 
     scripts: IComponent[];
 	scripts_pausedChanged: IComponent[];
@@ -158,6 +159,10 @@ export declare interface ICamera extends IComponent {
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;
 }
 
+export declare interface ICameraController {
+    get isCameraController(): boolean;
+}
+
 export declare interface ILight extends IComponent {
     intensity: number;
     color: Color;

package/src/engine/extensions/extension_utils.ts

@@ -43,7 +43,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParser, obj, promi
             // handle json pointer in string variable
             if (typeof val === "string") {
                 const ext = resolveExtension(parser, val);
-                if (ext !== null) {
+                if (ext !== null && ext !== undefined) {
                     if (typeof ext.then === "function")
                         promises.push(ext.then(res => obj[key] = res));
                     else obj[key] = ext;

package/src/engine/js-extensions/Camera.ts

@@ -0,0 +1,35 @@
+import { PerspectiveCamera } from "three";
+
+// Wrap camera FOV to allow animation of fov
+Object.defineProperty(PerspectiveCamera.prototype, "fov", {
+    get: function () {
+        return this._fov;;
+    },
+    set: function (val) {
+        const changed = val !== this._fov;
+        this._fov = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "near", {
+    get: function () {
+        return this._near;
+    },
+    set: function (val) {
+        const changed = val !== this._near;
+        this._near = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "far", {
+    get: function () {
+        return this._far;
+    },
+    set: function (val) {
+        const changed = val !== this._far;
+        this._far = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});

package/src/engine/js-extensions/Layers.ts

@@ -16,4 +16,5 @@ export function patchLayers() {
         if(this[$customVisibilityFlag] === false) return false;
         return origTest.call(this, layer);
     };
-}
+}
+patchLayers();

package/src/engine/js-extensions/index.ts

@@ -0,0 +1,2 @@
+import "./Layers"
+import "./Camera"

package/src/engine-components/CameraUtils.ts

@@ -1,32 +1,54 @@
 import { OrbitControls } from "./OrbitControls";
-import { Camera } from "./Camera";
 import { addNewComponent } from "../engine/engine_components";
-import { Color, Object3D, Scene, Vector3 } from "three";
-import { ICamera, SourceIdentifier } from "../engine/engine_types";
-import { lookAtInverse } from "../engine/engine_three_utils";
+import { Object3D } from "three";
+import { ICamera } from "../engine/engine_types";
 import { RGBAColor } from "./js-extensions/RGBAColor";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry";
-
+import { getCameraController } from "../engine/engine_camera";
+import { Camera } from "./Camera";
+import { EngineElement } from "../engine/engine_element";
 
 ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
-    createCameraWithOrbitControl(evt.context.scene, "unknown");
-});
+    const scene = evt.context.scene;
+    const srcId = "unknown";
 
+    const cameraObject = new Object3D();
+    scene.add(cameraObject);
 
-export function createCameraWithOrbitControl(scene: Scene, source: SourceIdentifier): ICamera {
-    const srcId = source;
-    const go = new Object3D();
-    scene.add(go);
     const camInstance = new Camera();
-    const cam = addNewComponent(go, camInstance, true) as ICamera
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera
     cam.sourceId = srcId;
     cam.clearFlags = 2;
     cam.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
-    const orbit = addNewComponent(go, new OrbitControls(), false) as OrbitControls;
-    orbit.sourceId = srcId;
-    go.position.x = -2;
-    go.position.y = 2;
-    go.position.z = 2;
-    lookAtInverse(go, new Vector3(0, 0, 0));
-    return cam as Camera;
-}
+
+    cameraObject.position.x = -2;
+    cameraObject.position.y = 2;
+    cameraObject.position.z = 2;
+    return cam;
+});
+
+ContextRegistry.registerCallback(ContextEvent.ContextCreated, (evt) => {
+    if (!evt.context.mainCamera) return;
+
+    // check if the <needle-engine controls> is not set to false
+    const engineElement = evt.context.domElement as EngineElement
+
+    if (engineElement?.cameraControls === true) {
+
+        // Check if something else already acts as a camera controller
+        const existing = getCameraController(evt.context.mainCamera);
+        if (existing?.isCameraController === true) {
+            return;
+        }
+
+        const cam = evt.context.mainCameraComponent;
+        const cameraObject = cam?.gameObject;
+        if (cameraObject) {
+            const orbit = addNewComponent(cameraObject, new OrbitControls(), false) as OrbitControls;
+            orbit.sourceId = "unknown";
+        }
+        else {
+            console.warn("Missing camera object, can not add orbit controls")
+        }
+    }
+})

package/src/engine-components/Light.ts

@@ -95,7 +95,17 @@ export class Light extends Behaviour implements ILight {
     public innerSpotAngle: number = 1;
 
     @serializable(Color)
-    public color: THREE.Color = new THREE.Color(0xffffff);
+    set color(val: Color) {
+        this._color = val;
+        if (this.light !== undefined) {
+            this.light.color = val;
+        }
+    }
+    get color(): Color {
+        if (this.light) return this.light.color;
+        return this._color;
+    }
+    public _color: THREE.Color = new THREE.Color(0xffffff);
 
     @serializable()
     set shadowNearPlane(val: number) {
@@ -242,13 +252,14 @@ export class Light extends Behaviour implements ILight {
 
     awake() {
         this.color = new THREE.Color(this.color ?? 0xffffff);
-        if(debug) console.log(this.name, this);
+        if (debug) console.log(this.name, this);
     }
 
     onEnable(): void {
         this.createLight();
         if (this.isBaked) return;
         else if (this.light) {
+            this.light.visible = true;
             if (this.selfIsLight) {
                 // nothing to do
             }
@@ -257,12 +268,14 @@ export class Light extends Behaviour implements ILight {
         }
         if (this.type === LightType.Directional)
             this.startCoroutine(this.updateMainLightRoutine(), FrameEvent.LateUpdate);
-
         this._webXRStartedListener = WebXR.addEventListener(WebXREvent.XRStarted, this.onWebXRStarted.bind(this));
         this._webXREndedListener = WebXR.addEventListener(WebXREvent.XRStopped, this.onWebXREnded.bind(this));
     }
 
     onDisable() {
+        if (this.light) {
+            this.light.visible = false;
+        }
         WebXR.removeEventListener(WebXREvent.XRStarted, this._webXRStartedListener);
         WebXR.removeEventListener(WebXREvent.XRStopped, this._webXREndedListener);
     }

package/src/engine-components/OrbitControls.ts

@@ -6,17 +6,23 @@ import { RaycastOptions } from "../engine/engine_physics";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { getParam, isMobileDevice } from "../engine/engine_utils";
 
-import { Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { EventSystem, EventSystemEvents } from "./ui/EventSystem";
-import { transformWithEsbuild } from "vite";
+import { ICameraController } from "../engine/engine_types";
+import { setCameraController } from "../engine/engine_camera";
 
 const freeCam = getParam("freecam");
 
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
 let defaultKeys: any = undefined;
 
-export class OrbitControls extends Behaviour {
+export class OrbitControls extends Behaviour implements ICameraController {
+
+    get isCameraController(): boolean {
+        return true;
+    }
+
     public get controls() {
         return this._controls;
     }
@@ -64,6 +70,7 @@ export class OrbitControls extends Behaviour {
 
     private _eventSystem?: EventSystem;
     private _afterHandleInputFn?: any;
+    private _camera : Camera | null = null;
 
     targetElement: HTMLElement | null = null;
 
@@ -98,8 +105,10 @@ export class OrbitControls extends Behaviour {
 
     onEnable() {
         this._enableTime = this.context.time.time;
-        const camGo = GameObject.getComponent(this.gameObject, Camera);
-        const cam = camGo?.cam;
+        const cameraComponent = GameObject.getComponent(this.gameObject, Camera);
+        this._camera = cameraComponent;
+        const cam = cameraComponent?.cam;
+        if (cam) setCameraController(cam, this, true);
         if (!this._controls) {
             console.assert(cam !== null && cam !== undefined, "Missing camera", this);
             if (cam)
@@ -153,6 +162,9 @@ export class OrbitControls extends Behaviour {
     }
 
     onDisable() {
+        if (this._camera?.cam) {
+            setCameraController(this._camera.cam, this, false);
+        }
         if (this._controls) {
             this._controls.enabled = false;
             this._controls.autoRotate = false;
@@ -160,7 +172,7 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    private _shouldDisable : boolean = false;
+    private _shouldDisable: boolean = false;
     private afterHandleInput() {
         if (this._controls && this._eventSystem) {
             this._shouldDisable = this._eventSystem.hasActiveUI;

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

@@ -276,7 +276,7 @@ export class AnimationTrackHandler extends TrackHandler {
             const isInTimeRange = time >= model.start && time <= model.end;
             const postExtrapolation: Models.ClipExtrapolation = model.postExtrapolationMode;
             let isActive = isInTimeRange;
-            if (!isActive && !didPostExtrapolate && model.end < time && model.postExtrapolationMode !== Models.ClipExtrapolation.None) {
+            if (!isActive && !didPostExtrapolate && model.end < time && postExtrapolation !== Models.ClipExtrapolation.None) {
                 const nextClip = i < this.clips.length - 1 ? this.models[i + 1] : null;
                 // use post extrapolate if its the last clip of the next clip has not yet started
                 if (!nextClip || nextClip.start > time) {
@@ -284,6 +284,12 @@ export class AnimationTrackHandler extends TrackHandler {
                     didPostExtrapolate = true;
                 }
             }
+            const preExtrapolation: Models.ClipExtrapolation = model.preExtrapolationMode;
+            if (i == 0 && !isActive && !didPostExtrapolate && model.start > time && preExtrapolation !== Models.ClipExtrapolation.None) {
+                isActive = true;
+                if (preExtrapolation !== Models.ClipExtrapolation.Hold)
+                    time += model.start;
+            }
             if (isActive) {
                 // const clip = this.clips[i];
                 let weight = 1;
@@ -316,9 +322,9 @@ export class AnimationTrackHandler extends TrackHandler {
                     }
                 }
 
-                if(model.reversed === true) action.time = action.getClip().duration - t;
+                if (model.reversed === true) action.time = action.getClip().duration - t;
                 else action.time = t;
-                
+
                 action.timeScale = 0;
                 const effectiveWeight = weight * this.director.weight;
                 action.weight = effectiveWeight;

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

@@ -53,6 +53,13 @@ export class BaseUIComponent extends Behaviour {
     // private _intermediate?: Object3D;
     protected _parentComponent?: BaseUIComponent | null = undefined;
 
+    __internalNewInstanceCreated() {
+        super.__internalNewInstanceCreated();
+        this.shadowComponent = null;
+        this._root = undefined;
+        this._parentComponent = undefined;
+    }
+
     onEnable() {
         super.onEnable();
     }
@@ -79,17 +86,7 @@ export class BaseUIComponent extends Behaviour {
         // this.gameObject.layers.set(2)
 
 
-        // TODO: only traverse our own hierarchy, we can stop if we find another owner
-        container.traverse(c => {
-            if (c[$shadowDomOwner] === undefined) {
-                c[$shadowDomOwner] = this;
-            }
-
-            // // this makes text not render anymore when enabled again
-            // if (raycastTarget === false) {
-            //     c.layers.set(2);
-            // }
-        });
+        this.setShadowComponentOwner(container);
 
         let needsUpdate = false;
 
@@ -136,6 +133,19 @@ export class BaseUIComponent extends Behaviour {
         // })
     }
 
+    protected setShadowComponentOwner(current: Object3D | null | undefined) {
+        if (!current) return;
+        // TODO: only traverse our own hierarchy, we can stop if we find another owner
+        if (current[$shadowDomOwner] === undefined || current[$shadowDomOwner] === this) {
+            current[$shadowDomOwner] = this;
+            if (current.children) {
+                for (const ch of current.children) {
+                    this.setShadowComponentOwner(ch);
+                }
+            }
+        }
+    }
+
     private traverseOwnedShadowComponents(current: Object3D, owner: any, callback: (obj: any) => void) {
         if (!current) return;
         if (current[$shadowDomOwner] === owner) {

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

@@ -6,6 +6,7 @@ import { RGBAColor } from "../js-extensions/RGBAColor";
 import { serializable } from "../../engine/engine_serialization_decorator";
 import { Animator } from "../Animator";
 import { getParam } from "../../engine/engine_utils";
+import { showBalloonMessage } from "../../engine/debug";
 
 const debug = getParam("debugbutton");
 
@@ -102,7 +103,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
 
     onPointerUp(_) {
         if (debug)
-            console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
+            console.warn("Button Up", this.animationTriggers?.highlightedTrigger, this.animator, this._isHovered);
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
             this.animator.SetTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
         }
@@ -112,8 +113,10 @@ export class Button extends Behaviour implements IPointerEventHandler {
     }
 
     onPointerClick(_args: PointerEventData) {
-        if (debug)
-            console.trace("Button Click", this.onClick);
+        if (debug) {
+            console.warn("Button Click", this.onClick);
+            showBalloonMessage("CLICKED button " + this.name + " at " + this.context.time.frameCount);
+        }
         this.onClick?.invoke();
     }
 
@@ -153,6 +156,7 @@ export class Button extends Behaviour implements IPointerEventHandler {
         super.awake();
         if (debug)
             console.log(this);
+        this._isInit = false;
         this.init();
     }