@needle-tools/engine 3.2.15-alpha → 3.3.0-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.2.15-alpha",
+    "version": "3.3.0-alpha",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in",
     "main": "dist/needle-engine.umd.cjs",
     "type": "module",
@@ -62,7 +62,7 @@
         "simplex-noise": "^4.0.1",
         "stats.js": "^0.17.0",
         "three": "npm:@needle-tools/three@^0.146.8",
-        "three-mesh-ui": "^6.4.5",
+        "three-mesh-ui": "npm:@needle-tools/three-mesh-ui@^7.1.4",
         "three.quarks": "^0.7.3",
         "uuid": "^9.0.0",
         "websocket-ts": "^1.1.1"

package/src/engine/codegen/register_types.js

@@ -76,13 +76,13 @@ import { Image } from "../../engine-components/ui/Image";
 import { InheritVelocityModule } from "../../engine-components/ParticleSystemModules";
 import { InputField } from "../../engine-components/ui/InputField";
 import { Interactable } from "../../engine-components/Interactable";
-import { Keyboard } from "../../engine-components/ui/Keyboard";
 import { LayoutGroup } from "../../engine-components/ui/Layout";
 import { Light } from "../../engine-components/Light";
 import { LimitVelocityOverLifetimeModule } from "../../engine-components/ParticleSystemModules";
 import { LODGroup } from "../../engine-components/LODGroup";
 import { LODModel } from "../../engine-components/LODGroup";
 import { LogStats } from "../../engine-components/debug/LogStats";
+import { LookAt } from "../../engine-components/utils/LookAt";
 import { LookAtConstraint } from "../../engine-components/LookAtConstraint";
 import { MainModule } from "../../engine-components/ParticleSystemModules";
 import { MaskableGraphic } from "../../engine-components/ui/Graphic";
@@ -97,6 +97,7 @@ import { ObjectRaycaster } from "../../engine-components/ui/Raycaster";
 import { OffsetConstraint } from "../../engine-components/OffsetConstraint";
 import { OpenURL } from "../../engine-components/utils/OpenURL";
 import { OrbitControls } from "../../engine-components/OrbitControls";
+import { Outline } from "../../engine-components/ui/Outline";
 import { ParticleBurst } from "../../engine-components/ParticleSystemModules";
 import { ParticleSubEmitter } from "../../engine-components/ParticleSystemSubEmitter";
 import { ParticleSystem } from "../../engine-components/ParticleSystem";
@@ -266,13 +267,13 @@ TypeStore.add("Image", Image);
 TypeStore.add("InheritVelocityModule", InheritVelocityModule);
 TypeStore.add("InputField", InputField);
 TypeStore.add("Interactable", Interactable);
-TypeStore.add("Keyboard", Keyboard);
 TypeStore.add("LayoutGroup", LayoutGroup);
 TypeStore.add("Light", Light);
 TypeStore.add("LimitVelocityOverLifetimeModule", LimitVelocityOverLifetimeModule);
 TypeStore.add("LODGroup", LODGroup);
 TypeStore.add("LODModel", LODModel);
 TypeStore.add("LogStats", LogStats);
+TypeStore.add("LookAt", LookAt);
 TypeStore.add("LookAtConstraint", LookAtConstraint);
 TypeStore.add("MainModule", MainModule);
 TypeStore.add("MaskableGraphic", MaskableGraphic);
@@ -287,6 +288,7 @@ TypeStore.add("ObjectRaycaster", ObjectRaycaster);
 TypeStore.add("OffsetConstraint", OffsetConstraint);
 TypeStore.add("OpenURL", OpenURL);
 TypeStore.add("OrbitControls", OrbitControls);
+TypeStore.add("Outline", Outline);
 TypeStore.add("ParticleBurst", ParticleBurst);
 TypeStore.add("ParticleSubEmitter", ParticleSubEmitter);
 TypeStore.add("ParticleSystem", ParticleSystem);

package/src/engine/engine_addressables.ts

@@ -27,8 +27,8 @@ export class Addressables {
 
     private _assetReferences: { [key: string]: AssetReference } = {};
 
-    findAssetReference(uri: string): AssetReference | null {
-        return this._assetReferences[uri] || null;
+    findAssetReference(key: string): AssetReference | null {
+        return this._assetReferences[key] || null;
     }
 
     registerAssetReference(ref: AssetReference): AssetReference {
@@ -48,9 +48,9 @@ export type ProgressCallback = (asset: AssetReference, prog: ProgressEvent) => v
 
 export class AssetReference {
 
-    static getOrCreate(sourceId: SourceIdentifier, uri: string, context: Context): AssetReference {
-        const fullPath = resolveUrl(sourceId, uri);
-        if (debug) console.log("GetOrCreate Addressable from", sourceId, uri, "FinalPath=", fullPath);
+    static getOrCreate(sourceId: SourceIdentifier, url: string, context: Context): AssetReference {
+        const fullPath = resolveUrl(sourceId, url);
+        if (debug) console.log("GetOrCreate Addressable from", sourceId, url, "FinalPath=", fullPath);
         const addressables = context.addressables;
         const existing = addressables.findAssetReference(fullPath);
         if (existing) return existing;
@@ -89,19 +89,19 @@ export class AssetReference {
     private _isLoadingRawBinary: boolean = false;
     private _rawBinary?: ArrayBuffer | null;
 
-    constructor(uri: string, hash?: string) {
+    constructor(uri: string, hash?: string, asset: any = null) {
         this._url = uri;
         this._hash = hash;
         if (uri.includes("?v="))
             this._hashedUri = uri;
         else
             this._hashedUri = hash ? uri + "?v=" + hash : uri;
-
+        if (asset !== null) this.asset = asset;
         registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
 
-    private async onResolvePrefab(uri: string): Promise<IGameObject | null> {
-        if (uri === this.uri) {
+    private async onResolvePrefab(url: string): Promise<IGameObject | null> {
+        if (url === this.uri) {
             if (this.mustLoad) await this.loadAssetAsync();
             if (this.asset) {
                 return this.asset;
@@ -320,12 +320,30 @@ class AddressableSerializer extends TypeSerializer {
                 return null;
             }
             if (!context.gltfId) {
-                console.error("Missing spurce id");
+                console.error("Missing source id");
                 return null;
             }
             const ref = AssetReference.getOrCreate(context.gltfId, data, context.context);
             return ref;
         }
+        else if (data instanceof Object3D) {
+            if (!context.context) {
+                console.error("Missing context");
+                return null;
+            }
+            if (!context.gltfId) {
+                console.error("Missing source id");
+                return null;
+            }
+            const obj = data;
+            const ctx = context.context;
+            const guid = obj["guid"] ?? obj.uuid;
+            const existing = ctx.addressables.findAssetReference(guid);
+            if (existing) return existing;
+            const ref = new AssetReference(guid, undefined, obj);
+            ctx.addressables.registerAssetReference(ref);
+            return ref;
+        }
         return null;
     }
 

package/src/engine/engine_element.ts

@@ -448,5 +448,5 @@ function getNameFromUrl(str: string) {
     let index = name.indexOf("?")
     if (index > 0)
         name = name.substring(0, index);
-    return name;
+    return decodeURIComponent(name);
 }

package/src/engine/engine_gameobject.ts

@@ -3,7 +3,7 @@ import { processNewScripts } from "./engine_mainloop_utils";
 import { InstantiateIdProvider } from "./engine_networking_instantiate";
 import { Context, registerComponent } from "./engine_setup";
 import { logHierarchy, setWorldPosition, setWorldQuaternion } from "./engine_three_utils";
-import { GuidsMap, IComponent as Component, IComponent, IGameObject as GameObject, UIDProvider } from "./engine_types";
+import { GuidsMap, IComponent as Component, IComponent, IGameObject as GameObject, UIDProvider, Constructor } from "./engine_types";
 import { getParam, tryFindObject } from "./engine_utils";
 import { apply } from "../engine-components/js-extensions/Object3D";
 import { $isUsingInstancing, InstancingUtil } from "./engine_instancing";
@@ -163,6 +163,23 @@ export function foreachComponent(instance: Object3D, cb: ForEachComponentCallbac
     return internalForEachComponent(instance, cb, recursive);
 }
 
+export function* foreachComponentEnumerator<T extends IComponent>(instance: Object3D, type?: Constructor<T>, includeChildren: boolean = false): Generator<T> {
+    if (!instance?.userData.components) return;
+    for (const comp of instance.userData.components) {
+        if (type && comp?.isComponent === true && comp instanceof type) {
+            yield comp;
+        }
+        else {
+            yield comp;
+        }
+    }
+    if (includeChildren === true) {
+        for (const ch of instance.children) {
+            yield* foreachComponentEnumerator(ch, type, true);
+        }
+    }
+}
+
 function internalForEachComponent(instance: Object3D, cb: ForEachComponentCallback, recursive: boolean, level: number = 0): any {
     if (!instance) return;
     if (!instance.isObject3D) {

package/src/engine/engine_input.ts

@@ -512,6 +512,17 @@ export class Input extends EventTarget {
     private onDown(evt: PointerEventArgs) {
         if (debug) console.log(evt.pointerType, "DOWN", evt.button);
         if (!this.isInRect(evt)) return;
+
+        // check if we received an mouse UP event for a touch (for some reason we get a mouse.down for touch.up)
+        if (evt.pointerType === PointerType.Mouse) {
+            const upTime = this._pointerUpTimestamp[evt.button];
+            if (upTime > 0 && upTime === evt.source?.timeStamp) {
+                // we received an UP event for a touch, ignore this DOWN event
+                if(debug) console.log("Ignoring mouse.down for touch.up");
+                return;
+            }
+        }
+
         this.setPointerState(evt.button, this._pointerPressed, true);
         this.setPointerState(evt.button, this._pointerDown, true);
         this.setPointerStateT(evt.button, this._pointerEvent, evt.source);

package/src/engine/engine_math.ts

@@ -49,10 +49,20 @@ class MathHelper {
         return radians * 180 / Math.PI;
     }
 
+    readonly Rad2Deg = 180 / Math.PI;
+
     toRadians(degrees: number) {
         return degrees * Math.PI / 180;
     }
 
+    readonly Deg2Rad = Math.PI / 180;
+
+    readonly Epsilon = 0.00001;
+
+    tan(radians: number) {
+        return Math.tan(radians);
+    }
+
     gammaToLinear(gamma: number) {
         return Math.pow(gamma, 2.2);
     }

package/src/engine-components/AnimatorController.ts

@@ -7,6 +7,7 @@ import { TypeStore } from "../engine/engine_typestore";
 import { assign } from "../engine/engine_serialization_core";
 import { Mathf } from "../engine/engine_math";
 import { isAnimationAction } from "../engine/engine_three_utils";
+import { isDevEnvironment } from "../engine/debug";
 
 const debug = getParam("debuganimatorcontroller");
 const debugRootMotion = getParam("debugrootmotion");
@@ -407,7 +408,12 @@ export class AnimatorController {
                 }
             }
         }
-        else console.warn("No action", state.motion, this);
+        else if (isDevEnvironment()) {
+            if (!state["__warned_no_motion"]) {
+                state["__warned_no_motion"] = true;
+                console.warn("No action", state.motion, this);
+            }
+        }
 
         if (debug)
             console.log("TRANSITION FROM " + prev?.name + " TO " + state.name, durationInSec, prevAction, action, action?.getEffectiveTimeScale(), action?.getEffectiveWeight(), action?.isRunning(), action?.isScheduled(), action?.paused);

package/src/engine-components/OrbitControls.ts

@@ -8,7 +8,7 @@ import { getParam, isMobileDevice } from "../engine/engine_utils";
 
 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 { AfterHandleInputEvent, EventSystem, EventSystemEvents } from "./ui/EventSystem";
 import { ICameraController } from "../engine/engine_types";
 import { setCameraController } from "../engine/engine_camera";
 import { SyncedTransform } from "./SyncedTransform";
@@ -176,15 +176,22 @@ export class OrbitControls extends Behaviour implements ICameraController {
     }
 
     private onControlsChangeStarted() {
-        if(this._syncedTransform) {
+        if (this._syncedTransform) {
             this._syncedTransform.requestOwnership();
         }
     }
 
     private _shouldDisable: boolean = false;
-    private afterHandleInput() {
-        if (this._controls && this._eventSystem) {
-            this._shouldDisable = this._eventSystem.hasActiveUI;
+    private afterHandleInput(evt: CustomEvent<AfterHandleInputEvent>) {
+        if (evt.detail.args.pointerId === 0) {
+            if (evt.detail.args.isDown) {
+                if (this._controls && this._eventSystem) {
+                    this._shouldDisable = this._eventSystem.hasActiveUI;
+                }
+            }
+            else if (!evt.detail.args.isPressed || evt.detail.args.isUp) {
+                this._shouldDisable = false;
+            }
         }
     }
 
@@ -205,6 +212,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
 
     onBeforeRender() {
         if (!this._controls) return;
+        if (this._cameraObject !== this.context.mainCamera) return;
 
         if (this.context.input.getPointerDown(0) || this.context.input.getPointerDown(1) || this.context.input.getPointerDown(2)) {
             this._inputs += 1;
@@ -267,7 +275,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         if (this._controls && !this.context.isInXR) {
             if (this.debugLog)
                 this._controls.domElement = this.context.renderer.domElement;
-            this._controls.enabled = !this._shouldDisable;
+            this._controls.enabled = !this._shouldDisable && this._camera === this.context.mainCameraComponent;
             this._controls.update();
         }
     }

package/src/engine-components/TransformGizmo.ts

@@ -9,57 +9,78 @@ import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
 export class TransformGizmo extends Behaviour {
 
     @serializable()
-    public isGizmo: boolean = true;
+    public isGizmo: boolean = false;
+
+    @serializable()
+    public translationSnap: number = 1;
+
+    @serializable()
+    public rotationSnapAngle: number = 15;
+
+    @serializable()
+    public scaleSnap: number = .25;
 
     private control?: TransformControls;
     private orbit?: OrbitControls;
 
-    awake() {
+    onEnable() {
         if (this.isGizmo && !params.showGizmos) return;
+
         if (!this.context.mainCamera) return;
-        this.control = new TransformControls(this.context.mainCamera, this.context.renderer.domElement);
-        this.control.visible = true;
-        this.control.enabled = true;
-        this.control.getRaycaster().layers.set(2);
-
-        this.control.size = 0.6;
-        this.control.traverse(x => {
-            const mesh = x as Mesh;
-            mesh.layers.set(2);
-            if (mesh) {
-                const gizmoMat = mesh.material as THREE.MeshBasicMaterial;
-                if (gizmoMat) {
-                    gizmoMat.opacity = 0.3;
-                }
-            }
-        });
-    }
 
-    start() {
-        if (this.context.mainCamera) {
-            const orbit = GameObject.getComponentInParent(this.context.mainCamera, OrbitControls) ?? undefined;
-            this.orbit = orbit;
+        if (!this.control) {
+            this.control = new TransformControls(this.context.mainCamera, this.context.domElement);
+            this.control.visible = true;
+            this.control.enabled = true;
+            this.control.getRaycaster().layers.set(2);
+            this.control.size = 1;
+            this.control.traverse(x => {
+                const mesh = x as Mesh;
+                mesh.layers.set(2);
+                if (mesh) {
+                    const gizmoMat = mesh.material as THREE.MeshBasicMaterial;
+                    if (gizmoMat) {
+                        gizmoMat.opacity = 0.3;
+                    }
+                }
+            });
+            this.orbit = GameObject.getComponentInParent(this.context.mainCamera, OrbitControls) ?? undefined;
         }
-    }
 
-    private changeEventListener?: any;
-    private windowKeyDownListener?: any;
-    private windowKeyUpListener?: any;
-
-    onEnable() {
         if (this.control) {
             this.context.scene.add(this.control);
             this.control.attach(this.gameObject);
+            this.changeEventListener = this.onControlChangedEvent.bind(this);
+            this.control?.addEventListener('dragging-changed', this.changeEventListener);
+            this.addWindowEvents();
         }
-        this.changeEventListener = this.onControlChangedEvent.bind(this);
-        this.control?.addEventListener('dragging-changed', this.changeEventListener);
-        this.attachWindowEvents();
     }
 
+    private changeEventListener?: any;
+    private windowKeyDownListener?: any;
+    private windowKeyUpListener?: any;
+
     onDisable() {
         this.control?.removeFromParent();
         if (this.changeEventListener)
             this.control?.removeEventListener('dragging-changed', this.changeEventListener);
+        this.removeWindowEvents();
+    }
+
+    enableSnapping() {
+        if (this.control) {
+            this.control.setTranslationSnap(this.translationSnap);
+            this.control.setRotationSnap(MathUtils.degToRad(this.rotationSnapAngle));
+            this.control.setScaleSnap(this.scaleSnap);
+        }
+    }
+
+    disableSnapping() {
+        if (this.control) {
+            this.control.setTranslationSnap(null);
+            this.control.setRotationSnap(null);
+            this.control.setScaleSnap(null);
+        }
     }
 
     private onControlChangedEvent(event) {
@@ -74,12 +95,13 @@ export class TransformGizmo extends Behaviour {
         }
     }
 
-    private attachWindowEvents() {
+    private addWindowEvents() {
         const control = this.control;
         if (!control) return;
 
         if (!this.windowKeyDownListener) {
             this.windowKeyDownListener = (event) => {
+                if (!this.enabled) return;
                 switch (event.keyCode) {
 
                     case 81: // Q
@@ -87,9 +109,7 @@ export class TransformGizmo extends Behaviour {
                         break;
 
                     case 16: // Shift
-                        control.setTranslationSnap(100);
-                        control.setRotationSnap(MathUtils.degToRad(15));
-                        control.setScaleSnap(0.25);
+                        this.enableSnapping();
                         break;
 
                     case 87: // W
@@ -103,34 +123,6 @@ export class TransformGizmo extends Behaviour {
                     case 82: // R
                         control.setMode('scale');
                         break;
-
-                    /*
-                    case 67: // C
-                        const position = currentCamera.position.clone();
-    
-                        currentCamera = currentCamera.isPerspectiveCamera ? cameraOrtho : cameraPersp;
-                        currentCamera.position.copy( position );
-    
-                        orbit.object = currentCamera;
-                        control.camera = currentCamera;
-    
-                        currentCamera.lookAt( orbit.target.x, orbit.target.y, orbit.target.z );
-                        onWindowResize();
-                        break;
-    
-                    case 86: // V
-                        const randomFoV = Math.random() + 0.1;
-                        const randomZoom = Math.random() + 0.1;
-    
-                        cameraPersp.fov = randomFoV * 160;
-                        cameraOrtho.bottom = - randomFoV * 500;
-                        cameraOrtho.top = randomFoV * 500;
-    
-                        cameraPersp.zoom = randomZoom * 5;
-                        cameraOrtho.zoom = randomZoom * 5;
-                        onWindowResize();
-                        break;
-                    */
                     case 187:
                     case 107: // +, =, num+
                         control.setSize(control.size + 0.1);
@@ -164,13 +156,10 @@ export class TransformGizmo extends Behaviour {
 
         if (!this.windowKeyUpListener) {
             this.windowKeyUpListener = (event) => {
-
+                if (!this.enabled) return;
                 switch (event.keyCode) {
-
                     case 16: // Shift
-                        control.setTranslationSnap(null);
-                        control.setRotationSnap(null);
-                        control.setScaleSnap(null);
+                        this.disableSnapping();
                         break;
 
                 }
@@ -178,8 +167,13 @@ export class TransformGizmo extends Behaviour {
             };
         }
 
-        
+
         window.addEventListener('keydown', this.windowKeyDownListener);
         window.addEventListener('keyup', this.windowKeyUpListener);
     }
+
+    private removeWindowEvents() {
+        window.removeEventListener('keydown', this.windowKeyDownListener);
+        window.removeEventListener('keyup', this.windowKeyUpListener);
+    }
 }

package/src/engine-components/codegen/components.ts

@@ -74,13 +74,13 @@ export { Image } from "../ui/Image";
 export { InheritVelocityModule } from "../ParticleSystemModules";
 export { InputField } from "../ui/InputField";
 export { Interactable } from "../Interactable";
-export { Keyboard } from "../ui/Keyboard";
 export { LayoutGroup } from "../ui/Layout";
 export { Light } from "../Light";
 export { LimitVelocityOverLifetimeModule } from "../ParticleSystemModules";
 export { LODGroup } from "../LODGroup";
 export { LODModel } from "../LODGroup";
 export { LogStats } from "../debug/LogStats";
+export { LookAt } from "../utils/LookAt";
 export { LookAtConstraint } from "../LookAtConstraint";
 export { MainModule } from "../ParticleSystemModules";
 export { MaskableGraphic } from "../ui/Graphic";
@@ -95,6 +95,7 @@ export { ObjectRaycaster } from "../ui/Raycaster";
 export { OffsetConstraint } from "../OffsetConstraint";
 export { OpenURL } from "../utils/OpenURL";
 export { OrbitControls } from "../OrbitControls";
+export { Outline } from "../ui/Outline";
 export { ParticleBurst } from "../ParticleSystemModules";
 export { ParticleSubEmitter } from "../ParticleSystemSubEmitter";
 export { ParticleSystem } from "../ParticleSystem";

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

@@ -69,9 +69,9 @@ export class Button extends Behaviour implements IPointerEventHandler {
             console.log("Button Enter", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = true;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
-            this.animator.SetTrigger(this.animationTriggers.highlightedTrigger);
+            this.animator.setTrigger(this.animationTriggers.highlightedTrigger);
         }
-        else if(this.transition === Transition.ColorTint && this.colors) {
+        else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState("hovered");
         }
         this.context.input.setCursorPointer();
@@ -82,9 +82,9 @@ export class Button extends Behaviour implements IPointerEventHandler {
             console.log("Button Exit", this.animationTriggers?.highlightedTrigger, this.animator);
         this._isHovered = false;
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
-            this.animator.SetTrigger(this.animationTriggers.normalTrigger);
+            this.animator.setTrigger(this.animationTriggers.normalTrigger);
         }
-        else if(this.transition === Transition.ColorTint && this.colors) {
+        else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState("normal");
         }
         this.context.input.setCursorNormal();
@@ -94,9 +94,9 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             console.log("Button Down", this.animationTriggers?.highlightedTrigger, this.animator);
         if (this.transition == Transition.Animation && this.animationTriggers && this.animator) {
-            this.animator.SetTrigger(this.animationTriggers.pressedTrigger);
+            this.animator.setTrigger(this.animationTriggers.pressedTrigger);
         }
-        else if(this.transition === Transition.ColorTint && this.colors) {
+        else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState("pressed");
         }
     }
@@ -105,9 +105,9 @@ export class Button extends Behaviour implements IPointerEventHandler {
         if (debug)
             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);
+            this.animator.setTrigger(this._isHovered ? this.animationTriggers.highlightedTrigger : this.animationTriggers.normalTrigger);
         }
-        else if(this.transition === Transition.ColorTint && this.colors) {
+        else if (this.transition === Transition.ColorTint && this.colors) {
             this._image?.setState(this._isHovered ? "hovered" : "normal");
         }
     }
@@ -197,6 +197,10 @@ export class Button extends Behaviour implements IPointerEventHandler {
     private stateSetup(image: Image) {
         image.setInteractable(this.interactable);
 
+        // @marwie :    If this piece of code could be moved to the SimpleStateBehavior instanciation location,
+        //              Its setup could be eased :
+        // @see https://github.com/felixmariotto/three-mesh-ui/blob/7.1.x/examples/ex__keyboard.js#L407
+
         const normal = this.getFinalColor(image.color, this.colors?.normalColor);
         const normalState = {
             state: "normal",
@@ -242,7 +246,8 @@ export class Button extends Behaviour implements IPointerEventHandler {
             state: "disabled",
             attributes: {
                 backgroundColor: disabled,
-                backgroundOpacity: disabled.alpha,
+                // @marwie, this disabled alpha property doesn't seem to have the opacity requested in unity
+                backgroundOpacity: disabled.alpha
             }
         };
         image.setupState(disabledState);