updating buttons

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

@@ -1,9 +1,11 @@
 import { Vector3 } from "babylonjs/Maths/math.vector";
 import { Mesh } from "babylonjs/Meshes/mesh";
+import { LinesMesh } from "babylonjs/Meshes/linesMesh";
 import { TransformNode } from "babylonjs/Meshes/transformNode";
 import { Scene } from "babylonjs/scene";
 
 import { Button3D } from "./button3D";
+import { Color3 } from 'babylonjs/Maths/math.color';
 
 /**
  * Enum for Button States
@@ -24,9 +26,11 @@ export class TouchButton3D extends Button3D {
     /** @hidden */
     protected _buttonState: ButtonState;
     protected _collisionMesh: Mesh;
+    protected _collidableFront: Vector3;
 
     /**
      * Creates a new button
+     * @param collisionMesh mesh to track collisions with
      * @param name defines the control name
      */
     constructor(collisionMesh: Mesh, name?: string) {
@@ -34,6 +38,12 @@ export class TouchButton3D extends Button3D {
 
         this._buttonState = ButtonState.None;
         this._collisionMesh = collisionMesh;
+        this._collidableFront = collisionMesh.forward;
+    }
+
+    public set collidableFront(front: Vector3)
+    {
+        this._collidableFront = front;
     }
 
     protected _getTypeName(): string {
@@ -42,6 +52,8 @@ export class TouchButton3D extends Button3D {
 
     protected _enableCollisions(scene: Scene) {
         var _this = this;
+        var debugLineMesh: LinesMesh;
+        var debugColour: Color3;
         scene.registerBeforeRender(function () {
             //Check for collision with haaaaand
             const indexTipMeshes = scene.getMeshesByTags("indexTip");
@@ -51,12 +63,14 @@ export class TouchButton3D extends Button3D {
 
                 const dummyPosition = Vector3.Zero();
                 const dummyPointerId = 0;
-                const dummyButtonIndex = 0;// left click;
+                const buttonIndex = 0; // Left click
 
                 const touchDepth = 0.5;
                 const hoverDepth = 0.8;
                 const flickerDelta = 0.05; // A delta to avoid state flickering when on the threshold
 
+                debugColour = Color3.Red();
+
                 // Update button state and fire events
                 switch(_this._buttonState)
                 {
@@ -70,6 +84,7 @@ export class TouchButton3D extends Button3D {
 
                         break;
                     case ButtonState.Hover:
+                        debugColour = Color3.Yellow();
                         if (distance > hoverDepth + flickerDelta)
                         {
                             console.log("Out of range");
@@ -80,7 +95,7 @@ export class TouchButton3D extends Button3D {
                         {
                             console.log("now pressing");
                             _this._buttonState = ButtonState.Press;
-                            _this._onPointerDown(_this, dummyPosition, dummyPointerId, dummyButtonIndex);
+                            _this._onPointerDown(_this, dummyPosition, dummyPointerId, buttonIndex);
                         }
                         else
                         {
@@ -89,10 +104,12 @@ export class TouchButton3D extends Button3D {
 
                         break;
                     case ButtonState.Press:
+                        debugColour = Color3.Green();
                         if (distance > touchDepth + flickerDelta)
                         {
                             console.log("no longer pressing");
-                            _this._buttonState = ButtonState.Hover;                            _this._onPointerUp(_this, dummyPosition, dummyPointerId, dummyButtonIndex, false /*notifyClick*/);
+                            _this._buttonState = ButtonState.Hover;
+                            _this._onPointerUp(_this, dummyPosition, dummyPointerId, buttonIndex, false /*notifyClick*/);
                         }
                         else
                         {
@@ -101,6 +118,14 @@ export class TouchButton3D extends Button3D {
 
                         break;
                 }
+
+                // Debug line mesh
+                debugLineMesh.dispose();
+                debugLineMesh = Mesh.CreateLines("debug_line", [
+                    _this._collisionMesh.getAbsolutePosition(),
+                    indexMesh.getAbsolutePosition()
+                ], scene);
+                debugLineMesh.color = debugColour;
             });
         });
     }

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

@@ -15,10 +15,11 @@ export class TouchMeshButton3D extends TouchButton3D {
     /**
      * Creates a new 3D button based on a mesh
      * @param mesh mesh to become a 3D button
+     * @param collisionMesh mesh to track collisions with
      * @param name defines the control name
      */
-    constructor(mesh: Mesh, name?: string) {
-        super(mesh, name);
+    constructor(mesh: Mesh, collisionMesh: Mesh, name?: string) {
+        super(collisionMesh, name);
         this._currentMesh = mesh;
 
         /**