@needle-tools/engine 2.58.3-pre → 2.59.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.58.3-pre",
+    "version": "2.59.0-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",
@@ -47,7 +47,7 @@
         "peerjs": "1.3.2",
         "simplex-noise": "^4.0.1",
         "stats.js": "^0.17.0",
-        "three": "npm:@needle-tools/three@^0.146.3",
+        "three": "npm:@needle-tools/three@^0.146.4",
         "three-mesh-ui": "^6.4.5",
         "three.quarks": "^0.7.3",
         "uuid": "^9.0.0",
@@ -56,7 +56,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.16.0",
         "@luncheon/esbuild-plugin-gzip": "^0.1.0",
-        "@needle-tools/gltf-transform-extensions": "^0.10.6-pre",
+        "@needle-tools/gltf-transform-extensions": "^0.10.8-pre",
         "@needle-tools/needle-component-compiler": "1.9.3",
         "@needle-tools/helper": "^0.2.1-pre",
         "@types/three": "0.146.0",

package/src/engine/debug/debug_overlay.ts

@@ -30,6 +30,7 @@ export function makeErrorsVisibleForDevelopment() {
         const error = console.error;
         console.error = (...args: any[]) => {
             error.apply(console, args);
+            onParseError(args);
             addLog(LogType.Error, args, null, null);
             onReceivedError();
         };
@@ -48,20 +49,31 @@ export function makeErrorsVisibleForDevelopment() {
 
 let errorCount = 0;
 
-function onReceivedError(){
+function onReceivedError() {
     errorCount += 1;
 }
 
+function onParseError(args: Array<any>) {
+    if (Array.isArray(args)) {
+        for (let i = 0; i < args.length; i++) {
+            const arg = args[i];
+            if (typeof arg === "string" && arg.startsWith("THREE.PropertyBinding: Trying to update node for track:")) {
+                args[i] = "Some animated objects couldn't be found: see console for details";
+            }
+        }
+    }
+}
+
 export function addLog(type: LogType, message: string | any[], _file?: string | null, _line?: number | null) {
-    if(hide) return;
+    if (hide) return;
     const context = ContextRegistry.Current;
     const domElement = context?.domElement ?? document.querySelector("needle-engine");
     if (!domElement) return;
     if (Array.isArray(message)) {
         let newMessage = "";
-        for(let i = 0; i < message.length; i++) {
-            if(typeof message[i] === "object") continue;
-            if(i > 0) newMessage += " ";
+        for (let i = 0; i < message.length; i++) {
+            if (typeof message[i] === "object") continue;
+            if (i > 0) newMessage += " ";
             newMessage += message[i];
         }
         message = newMessage;

package/src/engine/engine_addressables.ts

@@ -8,7 +8,7 @@ import { registerPrefabProvider, syncInstantiate } from "./engine_networking_ins
 import { download, hash } from "./engine_web_api";
 import { getLoader } from "./engine_gltf";
 import { SourceIdentifier } from "./engine_types";
-import { destroy, instantiate, InstantiateOptions } from "./engine_gameobject";
+import { destroy, instantiate, InstantiateOptions, isDestroyed } from "./engine_gameobject";
 import { IGameObject } from "./engine_types";
 
 const debug = getParam("debugaddressables");
@@ -111,7 +111,7 @@ export class AssetReference {
     }
 
     private get mustLoad() {
-        return !this.asset || this.asset.__destroyed === true;
+        return !this.asset || this.asset.__destroyed === true || isDestroyed(this.asset) === true;
     }
 
     isLoaded() { return this._rawBinary || this.asset !== undefined }
@@ -121,10 +121,11 @@ export class AssetReference {
             if (debug) console.log("Unload", this.asset);
             // TODO: we need a way to remove objects from the context (including components) without actually "destroying" them
             if (this.asset.scene)
-                destroy(this.asset.scene);
-            else destroy(this.asset);
+                destroy(this.asset.scene, true);
+            else destroy(this.asset, true);
         }
         this.asset = null;
+        this._rawBinary = undefined;
     }
 
     async preload(): Promise<ArrayBuffer | null> {
@@ -142,7 +143,9 @@ export class AssetReference {
     }
 
     async loadAssetAsync(prog?: ProgressCallback | null) {
-        if (!this.mustLoad) return;
+        if (debug)
+            console.log("loadAssetAsync", this.uri);
+        if (!this.mustLoad) return this.asset;
         if (prog)
             this._progressListeners.push(prog);
         if (this._loading !== undefined) {

package/src/engine/engine_element.ts

@@ -404,7 +404,8 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     }
 }
 
-window.customElements.define(htmlTagName, EngineElement);
+if (!window.customElements.get(htmlTagName))
+    window.customElements.define(htmlTagName, EngineElement);
 
 
 

package/src/engine/engine_gameobject.ts

@@ -51,8 +51,8 @@ export class InstantiateOptions {
 //         main.processStart(Context.Current, go);
 // }
 
-const $isActive = Symbol("isActive");
 
+const $isActive = Symbol("isActive");
 export function isActiveSelf(go: Object3D): boolean {
     const visible = go.visible || isUsingInstancing(go);
     if (go[$isActive] === undefined) {
@@ -86,7 +86,19 @@ export function findByGuid(guid: string, hierarchy: THREE.Object3D): GameObject
 }
 
 
-export function destroy(instance: Object3D | Component, recursive: boolean = true, isRoot: boolean = true) {
+const $isDestroyed = Symbol("isDestroyed");
+export function isDestroyed(go: Object3D): boolean {
+    return go[$isDestroyed];
+}
+export function setDestroyed(go: Object3D, value: boolean) {
+    go[$isDestroyed] = value;
+}
+
+export function destroy(instance: Object3D | Component, recursive: boolean = true, dispose: boolean = false) {
+    internalDestroy(instance, recursive, dispose, true);
+}
+
+function internalDestroy(instance: Object3D | Component, recursive: boolean = true, dispose: boolean = false, isRoot: boolean = true) {
     const comp = instance as Component;
     if (comp.isComponent) {
         comp.__internalDisable();
@@ -94,12 +106,17 @@ export function destroy(instance: Object3D | Component, recursive: boolean = tru
         return;
     }
 
+
     const obj = instance as GameObject;
+    if (dispose) disposeObject(obj);
+    setDestroyed(obj, true);
+
+
     if (debug) console.log(obj);
 
     if (recursive && obj.children) {
         for (const ch of obj.children) {
-            destroy(ch, recursive, false);
+            internalDestroy(ch, recursive, false, false);
         }
     }
 
@@ -125,6 +142,20 @@ export function destroy(instance: Object3D | Component, recursive: boolean = tru
         obj.removeFromParent();
 }
 
+function disposeObject(obj: Object3D) {
+    if (!obj) return;
+    const mesh = obj as THREE.Mesh;
+    if (mesh.geometry) {
+        mesh.geometry.dispose();
+    }
+    if (mesh.material) {
+        if (Array.isArray(mesh.material)) {
+            mesh.material.forEach(m => m.dispose());
+        } else {
+            mesh.material.dispose();
+        }
+    }
+}
 
 export function foreachComponent(instance: THREE.Object3D, cb: (comp: Component) => any, recursive: boolean = true): any {
     if (!instance) return;

package/src/engine/engine_hot_reload.ts

@@ -3,6 +3,7 @@ import { TypeStore } from "./engine_typestore";
 import { addScriptToArrays, removeScriptFromContext } from "./engine_mainloop_utils"
 import { showBalloonWarning } from "./debug/debug";
 import { getParam } from "./engine_utils";
+import { addLog, LogType } from "./debug/debug_overlay";
 
 const debug = getParam("debughotreload");
 
@@ -27,6 +28,11 @@ let isApplyingChanges = false;
 
 const instances: Map<string, object[]> = new Map();
 
+/** true during hot reload, can be used to modify behaviour in onEnable and onDisable */
+export function isHotReloading() {
+    return isApplyingChanges;
+}
+
 export function register(instance: object) {
     if (isApplyingChanges) return;
     const type = instance.constructor;
@@ -77,9 +83,10 @@ function reloadPageOnHotReloadError() {
 
 export function applyChanges(newModule): boolean {
 
-    reloadPageOnHotReloadError();
+    if (debug)
+        console.log("Hot Reload - apply changes");
 
-    // showBalloonMessage("Hot reloading");
+    reloadPageOnHotReloadError();
 
     // console.dir(newModule);
 
@@ -88,14 +95,17 @@ export function applyChanges(newModule): boolean {
             isApplyingChanges = true;
 
             const typeToUpdate = TypeStore.get(key);
-            if (!typeToUpdate) 
-            {
+            if (!typeToUpdate) {
                 continue;
             }
             const newType = newModule[key];
             const instancesOfType = instances.get(newType.name);
 
-            console.log("[Needle Engine] Updating type: " + key + " [" + instancesOfType?.length + "]");
+            let hotReloadMessage = "[Needle Engine] Updating type: " + key;
+            let typesCount = instancesOfType?.length ?? -1;
+            if (typesCount > 0) hotReloadMessage += " x" + typesCount;
+            else hotReloadMessage += " - no instances";
+            console.log(hotReloadMessage);
 
             // Update prototype (methods and properties)
             const previousMethods = Object.getOwnPropertyNames(typeToUpdate.prototype);
@@ -177,6 +187,7 @@ export function applyChanges(newModule): boolean {
         }
         finally {
             isApplyingChanges = false;
+            addLog(LogType.Log, "Script changes applied (HMR)")
         }
     }
 

package/src/engine/engine_input.ts

@@ -80,6 +80,7 @@ export class Input extends EventTarget {
             this.context.domElement.style.cursor = "default";
     }
 
+    /** how many pointers are currently pressed */
     getPointerPressedCount(): number {
         let count = 0;
         for (let i = 0; i < this._pointerPressed.length; i++) {
@@ -340,6 +341,13 @@ export class Input extends EventTarget {
             this._mouseWheelDeltaY[i] = 0;
     }
 
+    private canReceiveInput(evt : Event) {
+        // If the user has HTML objects ontop of the canvas
+        if(evt.target instanceof HTMLCanvasElement) return true;
+        const css = window.getComputedStyle(evt.target as HTMLElement);
+        if(css.pointerEvents === "all") return false;
+        return true;
+    }
 
     private keysPressed: { [key: number]: { pressed: boolean, frame: number, startFrame: number, key: string } } = {};
 
@@ -372,6 +380,7 @@ export class Input extends EventTarget {
     }
 
     private onMouseWheel(evt: WheelEvent) {
+        if(this.canReceiveInput(evt) === false) return;
         if (this._mouseWheelDeltaY.length <= 0) this._mouseWheelDeltaY.push(0);
         if (this._mouseWheelChanged.length <= 0) this._mouseWheelChanged.push(false);
         this._mouseWheelChanged[0] = true;
@@ -381,6 +390,7 @@ export class Input extends EventTarget {
 
     private onTouchStart(evt: TouchEvent) {
         if (evt.changedTouches.length <= 0) return;
+        if(this.canReceiveInput(evt) === false) return;
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
             const id = this.getPointerIndex(touch.identifier)
@@ -415,6 +425,7 @@ export class Input extends EventTarget {
 
     private onMouseDown(evt: MouseEvent) {
         if (evt.defaultPrevented) return;
+        if(this.canReceiveInput(evt) === false) return;
         let i = evt.button;
         this.onDown({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }

package/src/engine/engine_utils.ts

@@ -80,12 +80,13 @@ export function setParam(paramName: string, paramValue: string): void {
     document.location.search = urlParams.toString();
 }
 
-export function setParamWithoutReload(paramName: string, paramValue: string, appendHistory = true): void {
+export function setParamWithoutReload(paramName: string, paramValue: string | null, appendHistory = true): void {
     const urlParams = getUrlParams();
     if (urlParams.has(paramName)) {
-        urlParams.set(paramName, paramValue);
+        if(paramValue === null) urlParams.delete(paramName);
+        else urlParams.set(paramName, paramValue);
     }
-    else
+    else if(paramValue !== null)
         urlParams.append(paramName, paramValue);
     if (appendHistory) pushState(paramName, urlParams);
     else setState(paramName, urlParams);

package/src/engine/extensions/NEEDLE_gameobject_data.ts

@@ -46,8 +46,7 @@ export class NEEDLE_gameobject_data implements GLTFLoaderPlugin {
             const node = this.parser.json.nodes[index];
             if (node && node.extensions) {
                 const ext = node.extensions[EXTENSION_NAME];
-                if (ext)
-                {
+                if (ext) {
                     const p = this.findAndApplyExtensionData(index, ext);
                     promises.push(p);
                 }
@@ -65,13 +64,19 @@ export class NEEDLE_gameobject_data implements GLTFLoaderPlugin {
 
 
     private applyExtensionData(node: Object3D, ext: GameObjectData) {
+        if (ext.layers === undefined) ext.layers = 0;
         node.userData.layer = ext.layers;
         node.layers.disableAll();
         node.layers.set(ext.layers);
-        node.userData.tag = ext.tag;
-        node.userData.hideFlags = ext.hideFlags;
-        node.userData.static = ext.static;
-        node.visible = ext.activeSelf;
+
+        node.userData.tag = ext.tag ?? "none";
+
+        node.userData.hideFlags = ext.hideFlags ?? 0;
+
+        node.userData.static = ext.static ?? false;
+
+        node.visible = ext.activeSelf ?? true;
+        
         node["guid"] = ext.guid;
         // console.log(node.name, ext.activeSelf, node);
     }

package/src/engine-components/Animator.ts

@@ -4,7 +4,7 @@ import { LoopOnce, AnimationActionLoopStyles, AnimationAction } from "three";
 import { getParam, deepClone } from "../engine/engine_utils";
 import { AnimatorControllerModel } from "../engine/extensions/NEEDLE_animator_controller_model";
 import { AnimatorController } from "./AnimatorController";
-import {  serializable } from "../engine/engine_serialization_decorator";
+import { serializable } from "../engine/engine_serialization_decorator";
 import { Mathf } from "../engine/engine_math";
 
 const debug = getParam("debuganimator");
@@ -39,7 +39,7 @@ export class Animator extends Behaviour {
         }
         if (val) {
             if (!(val instanceof AnimatorController)) {
-                if(debug) console.log("Assign animator controller", val, this);
+                if (debug) console.log("Assign animator controller", val, this);
                 this._animatorController = new AnimatorController(val);
             }
             else this._animatorController = val;
@@ -50,7 +50,7 @@ export class Animator extends Behaviour {
         return this._animatorController;
     }
 
-    Play(name: string | number, layer: number = -1, normalizedTime: number = Number.NEGATIVE_INFINITY, transitionDurationInSec:number = 0) {
+    Play(name: string | number, layer: number = -1, normalizedTime: number = Number.NEGATIVE_INFINITY, transitionDurationInSec: number = 0) {
         this.runtimeAnimatorController?.Play(name, layer, normalizedTime, transitionDurationInSec);
     }
 
@@ -125,12 +125,15 @@ export class Animator extends Behaviour {
         if (!this.gameObject) return;
         if (this.runtimeAnimatorController) {
             const clone = this.runtimeAnimatorController.clone();
-            console.assert(this.runtimeAnimatorController !== clone);
-            this.runtimeAnimatorController = clone;
-            console.assert(this.runtimeAnimatorController === clone);
-            this.runtimeAnimatorController.bind(this);
-            this.runtimeAnimatorController.SetSpeed(this.speed);
-            this.runtimeAnimatorController.normalizedStartOffset = this.normalizedStartOffset;
+            if (clone) {
+                console.assert(this.runtimeAnimatorController !== clone);
+                this.runtimeAnimatorController = clone;
+                console.assert(this.runtimeAnimatorController === clone);
+                this.runtimeAnimatorController.bind(this);
+                this.runtimeAnimatorController.SetSpeed(this.speed);
+                this.runtimeAnimatorController.normalizedStartOffset = this.normalizedStartOffset;
+            }
+            else console.warn("Could not clone animator controller", this.runtimeAnimatorController);
         }
     }
 

package/src/engine-components/AnimatorController.ts

@@ -39,44 +39,44 @@ export class AnimatorController {
 
     SetBool(name: string | number, value: boolean) {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.filter(p => p[key] === name).forEach(p => p.value = value);
+        return this.model?.parameters?.filter(p => p[key] === name).forEach(p => p.value = value);
     }
 
     GetBool(name: string | number): boolean {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.find(p => p[key] === name)?.value as boolean ?? false;
+        return this.model?.parameters?.find(p => p[key] === name)?.value as boolean ?? false;
     }
 
     SetFloat(name: string | number, val: number) {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.filter(p => p[key] === name).forEach(p => p.value = val);
+        return this.model?.parameters?.filter(p => p[key] === name).forEach(p => p.value = val);
     }
 
     GetFloat(name: string | number): number {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.find(p => p[key] === name)?.value as number ?? 0;
+        return this.model?.parameters?.find(p => p[key] === name)?.value as number ?? 0;
     }
 
     SetInteger(name: string | number, val: number) {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.filter(p => p[key] === name).forEach(p => p.value = val);
+        return this.model?.parameters?.filter(p => p[key] === name).forEach(p => p.value = val);
     }
 
     GetInteger(name: string | number): number {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.find(p => p[key] === name)?.value as number ?? 0;
+        return this.model?.parameters?.find(p => p[key] === name)?.value as number ?? 0;
     }
 
     SetTrigger(name: string | number) {
         if (debug)
             console.log("SET TRIGGER", name);
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.filter(p => p[key] === name).forEach(p => p.value = true);
+        return this.model?.parameters?.filter(p => p[key] === name).forEach(p => p.value = true);
     }
 
     ResetTrigger(name: string | number) {
         const key = typeof name === "string" ? "name" : "hash";
-        return this.model?.parameters.filter(p => p[key] === name).forEach(p => p.value = false);
+        return this.model?.parameters?.filter(p => p[key] === name).forEach(p => p.value = false);
     }
 
     IsInTransition(): boolean {
@@ -89,9 +89,11 @@ export class AnimatorController {
 
     FindState(name: string | undefined | null): State | null {
         if (!name) return null;
-        for (const layer of this.model.layers) {
-            for (const state of layer.stateMachine.states) {
-                if (state.name === name) return state;
+        if (Array.isArray(this.model.layers)) {
+            for (const layer of this.model.layers) {
+                for (const state of layer.stateMachine.states) {
+                    if (state.name === name) return state;
+                }
             }
         }
         return null;
@@ -117,6 +119,10 @@ export class AnimatorController {
     }
 
     clone() {
+        if (typeof this.model === "string") {
+            console.warn("AnimatorController has not been resolved, can not create model from string", this.model);
+            return null;
+        }
         // clone runtime controller but dont clone clip or action
         const clonedModel = deepClone(this.model, (_owner, _key, _value) => {
             if (_value === null || _value === undefined) return true;
@@ -435,6 +441,7 @@ export class AnimatorController {
     }
 
     private createActions(_animator: Animator) {
+        // console.trace(this.model, _animator);
         for (const layer of this.model.layers) {
             const sm = layer.stateMachine;
             for (let index = 0; index < sm.states.length; index++) {
@@ -444,9 +451,9 @@ export class AnimatorController {
                 if (!state.transitions) {
                     state.transitions = [];
                 }
-                for(const t of state.transitions) {
+                for (const t of state.transitions) {
                     // can happen if conditions are empty in blender - the exporter seems to skip empty arrays
-                    if(!t.conditions) t.conditions = [];
+                    if (!t.conditions) t.conditions = [];
                 }
 
                 // ensure we have a motion even if none was exported

package/src/engine-components/Component.ts

@@ -8,7 +8,7 @@ import { Object3D } from "three";
 import { syncDestroy, syncInstantiate } from "../engine/engine_networking_instantiate";
 import { ConstructorConcrete, SourceIdentifier, IComponent, IGameObject, Constructor, GuidsMap, UIDProvider, Collision, ICollider } from "../engine/engine_types";
 import { addNewComponent, destroyComponentInstance, findObjectOfType, findObjectsOfType, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, moveComponentInstance, removeComponent } from "../engine/engine_components";
-import { findByGuid, destroy, InstantiateOptions, instantiate, HideFlags, foreachComponent, markAsInstancedRendered, isActiveInHierarchy, isActiveSelf, isUsingInstancing, setActive } from "../engine/engine_gameobject";
+import { findByGuid, destroy, InstantiateOptions, instantiate, HideFlags, foreachComponent, markAsInstancedRendered, isActiveInHierarchy, isActiveSelf, isUsingInstancing, setActive, isDestroyed } from "../engine/engine_gameobject";
 
 
 // export interface ISerializationCallbackReceiver {
@@ -23,6 +23,10 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D, IGam
 
     guid: string | undefined;
 
+    public static isDestroyed(go: THREE.Object3D): boolean {
+        return isDestroyed(go);
+    }
+
     public static setActive(go: THREE.Object3D, active: boolean, processStart: boolean = true, setVisible: boolean = true) {
         if (!go) return;
         setActive(go, active, setVisible);

package/src/engine-components/OrbitControls.ts

@@ -8,6 +8,8 @@ import { getParam, isMobileDevice } from "../engine/engine_utils";
 
 import { 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";
 
 const freeCam = getParam("freecam");
 
@@ -60,11 +62,40 @@ export class OrbitControls extends Behaviour {
     private _enableTime: number = 0; // use to disable double click when double clicking on UI
     private _startedListeningToKeyEvents: boolean = false;
 
+    private _eventSystem?: EventSystem;
+    private _afterHandleInputFn?: any;
+
+    targetElement: HTMLElement | null = null;
+
     awake(): void {
         this._lookTargetPosition = new Vector3();
         this._startedListeningToKeyEvents = false;
     }
 
+    start() {
+        if (this._controls) {
+            const camGo = GameObject.getComponent(this.gameObject, Camera);
+            if (camGo && !this.setFromTargetPosition()) {
+                if (this.debugLog)
+                    console.log("NO TARGET");
+                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                this.setTarget(forward, true);
+            }
+        }
+        this.startCoroutine(this.startRaycastDelayed());
+
+        this._eventSystem = EventSystem.get(this.context) ?? undefined;
+        if (this._eventSystem) {
+            this._afterHandleInputFn = this.afterHandleInput.bind(this);
+            this._eventSystem.addEventListener(EventSystemEvents.AfterHandleInput, this._afterHandleInputFn!);
+        }
+    }
+
+    onDestroy() {
+        this._controls?.dispose();
+        this._eventSystem?.removeEventListener(EventSystemEvents.AfterHandleInput, this._afterHandleInputFn!);
+    }
+
     onEnable() {
         this._enableTime = this.context.time.time;
         const camGo = GameObject.getComponent(this.gameObject, Camera);
@@ -73,7 +104,10 @@ export class OrbitControls extends Behaviour {
             console.assert(cam !== null && cam !== undefined, "Missing camera", this);
             if (cam)
                 this._cameraObject = cam;
-            this._controls = new ThreeOrbitControls(cam!, this.context.renderer.domElement);
+            // Using the parent if possible to make it possible to disable input on the canvas
+            // for having HTML content behind it and still receive input
+            const element = this.targetElement ?? this.context.domElement;
+            this._controls = new ThreeOrbitControls(cam!, element);
             if (defaultKeys === undefined) defaultKeys = { ...this._controls.keys };
         }
 
@@ -115,6 +149,7 @@ export class OrbitControls extends Behaviour {
                 this._controls.listenToKeyEvents(window.document.body);
             }
         }
+
     }
 
     onDisable() {
@@ -125,21 +160,11 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    onDestroy() {
-        this._controls?.dispose();
-    }
-
-    start() {
-        if (this._controls) {
-            const camGo = GameObject.getComponent(this.gameObject, Camera);
-            if (camGo && !this.setFromTargetPosition()) {
-                if (this.debugLog)
-                    console.log("NO TARGET");
-                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
-                this.setTarget(forward, true);
-            }
+    private _shouldDisable : boolean = false;
+    private afterHandleInput() {
+        if (this._controls && this._eventSystem) {
+            this._shouldDisable = this._eventSystem.hasActiveUI;
         }
-        this.startCoroutine(this.startRaycastDelayed());
     }
 
     // we need to wait one frame (when starting the scene for the very first time)
@@ -221,7 +246,7 @@ export class OrbitControls extends Behaviour {
         if (this._controls && !this.context.isInXR) {
             if (this.debugLog)
                 this._controls.domElement = this.context.renderer.domElement;
-            this._controls.enabled = true;
+            this._controls.enabled = !this._shouldDisable;
             this._controls.update();
         }
     }
@@ -309,11 +334,11 @@ export class OrbitControls extends Behaviour {
         for (const object of objects)
             box.expandByObject(object);
 
-        box.getSize( size );
-        box.getCenter( center );
+        box.getSize(size);
+        box.getCenter(center);
 
         const maxSize = Math.max(size.x, size.y, size.z);
-        const fitHeightDistance = maxSize / (2 * Math.atan( Math.PI * camera.fov / 360 ));
+        const fitHeightDistance = maxSize / (2 * Math.atan(Math.PI * camera.fov / 360));
         const fitWidthDistance = fitHeightDistance / camera.aspect;
         const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance);