pulling out the collision code

gui/src/3D/controls/index.ts

@@ -9,5 +9,6 @@ export * from "./planePanel";
 export * from "./scatterPanel";
 export * from "./spherePanel";
 export * from "./stackPanel3D";
+export * from "./touchButton3D";
 export * from "./touchMeshButton3D";
 export * from "./volumeBasedPanel";

gui/src/3D/controls/touchButton3D.ts

@@ -0,0 +1,123 @@
+import { Vector3 } from "babylonjs/Maths/math.vector";
+import { Mesh } from "babylonjs/Meshes/mesh";
+import { TransformNode } from "babylonjs/Meshes/transformNode";
+import { Scene } from "babylonjs/scene";
+
+import { Button3D } from "./button3D";
+
+/**
+ * Enum for Button States
+ */
+export enum ButtonState {
+    /** None */
+    None = 0,
+    /** Pointer Entered */
+    Hover = 1,
+    /** Pointer Down */
+    Press = 2
+}
+
+/**
+ * Class used to create a touchable button in 3D
+ */
+export class TouchButton3D extends Button3D {
+    /** @hidden */
+    protected _buttonState: ButtonState;
+    protected _collisionMesh: Mesh;
+
+    /**
+     * Creates a new button
+     * @param name defines the control name
+     */
+    constructor(collisionMesh: Mesh, name?: string) {
+        super(name);
+
+        this._buttonState = ButtonState.None;
+        this._collisionMesh = collisionMesh;
+    }
+
+    protected _getTypeName(): string {
+        return "TouchButton3D";
+    }
+
+    protected _enableCollisions(scene: Scene) {
+        var _this = this;
+        scene.registerBeforeRender(function () {
+            //Check for collision with haaaaand
+            const indexTipMeshes = scene.getMeshesByTags("indexTip");
+            indexTipMeshes.forEach(function (indexMesh: Mesh) {
+                const distance = _this._collisionMesh.getAbsolutePosition().subtract(indexMesh.getAbsolutePosition()).length();
+                console.log(distance);
+
+                // for some reason the absolute positions don't line up? I'll have to ask about that.
+
+                const dummyPosition = Vector3.Zero();
+                const dummyPointerId = 0;
+                const dummyButtonIndex = 0;// left click;
+
+                // Update button state and fire events
+                switch(_this._buttonState)
+                {
+                    case ButtonState.None:
+                        if (distance < 1)
+                        {
+                            console.log("Now hovering");
+                            _this._buttonState = ButtonState.Hover;
+                            _this._onPointerEnter(_this);// call Control3D._processObservables instead?
+                        }
+
+                        break;
+                    case ButtonState.Hover:
+                        if (distance > 1.1)
+                        {
+                            console.log("Out of range");
+                            _this._buttonState = ButtonState.None;
+                            _this._onPointerOut(_this);
+                        }
+                        else if (distance < 0.4)
+                        {
+                            console.log("now pressing");
+                            _this._buttonState = ButtonState.Press;
+                            _this._onPointerDown(_this, dummyPosition, dummyPointerId, dummyButtonIndex);
+                        }
+                        else
+                        {
+                            _this._onPointerMove(_this, dummyPosition);
+                        }
+
+                        break;
+                    case ButtonState.Press:
+                        if (distance > 0.5)
+                        {
+                            console.log("no longer pressing");
+                            _this._buttonState = ButtonState.Hover;                            _this._onPointerUp(_this, dummyPosition, dummyPointerId, dummyButtonIndex, false /*notifyClick*/);
+                        }
+                        else
+                        {
+                            _this._onPointerMove(_this, dummyPosition);
+                        }
+
+                        break;
+                }
+            });
+        });
+    }
+
+    // Mesh association
+    protected _createNode(scene: Scene): TransformNode {
+        this._enableCollisions(scene);
+
+        return super._createNode(scene);
+    }
+
+    /**
+     * Releases all associated resources
+     */
+    public dispose() {
+        super.dispose();
+
+        if (this._collisionMesh) {
+            this._collisionMesh.dispose();
+        }
+    }
+}

gui/src/3D/controls/touchMeshButton3D.ts

@@ -1,30 +1,16 @@
 import { TransformNode } from "babylonjs/Meshes/transformNode";
 import { AbstractMesh } from "babylonjs/Meshes/abstractMesh";
 import { Mesh } from "babylonjs/Meshes/mesh";
-import { Vector3 } from "babylonjs/Maths/math.vector";
 import { Scene } from "babylonjs/scene";
 
-import { MeshButton3D } from "./meshButton3D";
+import { TouchButton3D } from "./touchButton3D";
 
 /**
- * Enum for Button States
+ * Class used to create an interactable object. It's a touchable 3D button using a mesh coming from the current scene
  */
-export enum ButtonState {
-    /** None */
-    None = 0,
-    /** Pointer Entered */
-    Hover = 1,
-    /** Pointer Down */
-    Press = 2
-}
-
-/**
- * Class used to create an interactable object. It's a 3D button using a mesh coming from the current scene
- */
-export class TouchMeshButton3D extends MeshButton3D {
+export class TouchMeshButton3D extends TouchButton3D {
     /** @hidden */
     protected _currentMesh: Mesh;
-    protected _buttonState: ButtonState;
 
     /**
      * Creates a new 3D button based on a mesh
@@ -34,7 +20,38 @@ export class TouchMeshButton3D extends MeshButton3D {
     constructor(mesh: Mesh, name?: string) {
         super(mesh, name);
         this._currentMesh = mesh;
-        this._buttonState = ButtonState.None;
+
+        /**
+         * Provides a default behavior on hover/out & up/down
+         * Override those function to create your own desired behavior specific to your mesh
+         */
+        this.pointerEnterAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.1);
+        };
+
+        this.pointerOutAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.0 / 1.1);
+        };
+
+        this.pointerDownAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(0.95);
+        };
+
+        this.pointerUpAnimation = () => {
+            if (!this.mesh) {
+                return;
+            }
+            this.mesh.scaling.scaleInPlace(1.0 / 0.95);
+        };
     }
 
     protected _getTypeName(): string {
@@ -43,73 +60,11 @@ export class TouchMeshButton3D extends MeshButton3D {
 
     // Mesh association
     protected _createNode(scene: Scene): TransformNode {
+        this._enableCollisions(scene);
+
         this._currentMesh.getChildMeshes().forEach((mesh) => {
             mesh.metadata = this;
         });
-
-// this._currentMesh is the collidable mesh
-// this._currentMesh.forward() returns the forward vector
-        var _this = this;
-        scene.registerBeforeRender(function () {
-            //Check for collision with haaaaand
-            const indexTipMeshes = scene.getMeshesByTags("indexTip");
-            indexTipMeshes.forEach(function (indexMesh: Mesh) {
-                const distance = _this._currentMesh.getAbsolutePosition().subtract(indexMesh.getAbsolutePosition()).length();
-                console.log(distance);
-
-                // for some reason the absolute positions don't line up? I'll have to ask about that.
-
-                const dummyPosition = Vector3.Zero();
-                const dummyPointerId = 0;
-                const dummyButtonIndex = 0;// left click;
-
-                // Update button state and fire events
-                switch(_this._buttonState)
-                {
-                    case ButtonState.None:
-                        if (distance < 1)
-                        {
-                            console.log("Now hovering");
-                            _this._buttonState = ButtonState.Hover;
-                            _this._onPointerEnter(_this);// call Control3D._processObservables instead?
-                        }
-
-                        break;
-                    case ButtonState.Hover:
-                        if (distance > 1.1)
-                        {
-                            console.log("Out of range");
-                            _this._buttonState = ButtonState.None;
-                            _this._onPointerOut(_this);
-                        }
-                        else if (distance < 0.4)
-                        {
-                            console.log("now pressing");
-                            _this._buttonState = ButtonState.Press;
-                            _this._onPointerDown(_this, dummyPosition, dummyPointerId, dummyButtonIndex);
-                        }
-                        else
-                        {
-                            _this._onPointerMove(_this, dummyPosition);
-                        }
-
-                        break;
-                    case ButtonState.Press:
-                        if (distance > 0.5)
-                        {
-                            console.log("no longer pressing");
-                            _this._buttonState = ButtonState.Hover;                            _this._onPointerUp(_this, dummyPosition, dummyPointerId, dummyButtonIndex, false /*notifyClick*/);
-                        }
-                        else
-                        {
-                            _this._onPointerMove(_this, dummyPosition);
-                        }
-
-                        break;
-                }
-            });
-        });
-
         return this._currentMesh;
     }