Axes viewer

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/axesViewerComponent.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { TransformNode } from "babylonjs";
+import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
+
+interface IAxisViewerComponentProps {
+    node: TransformNode
+}
+
+export class AxesViewerComponent extends React.Component<IAxisViewerComponentProps, { displayAxis: boolean }> {
+    constructor(props: IAxisViewerComponentProps) {
+        super(props);
+        const node = this.props.node;
+
+        if (!node.metadata) {
+            node.metadata = {};
+        }
+
+        this.state = { displayAxis: (node.metadata && node.metadata.axisViewer) ? true : false }
+    }
+
+    displayAxes() {
+        const node = this.props.node;
+        const scene = node.getScene();
+
+        if (node.metadata.axisViewer) {
+            node.metadata.axisViewer.dispose();
+            node.metadata.axisViewer = null;
+
+            scene.onBeforeRenderObservable.remove(node.metadata.onBeforeRenderObserver);
+            node.metadata.onBeforeRenderObserver = null;
+
+            this.setState({ displayAxis: false });
+
+            return;
+        }
+
+        const viewer = new BABYLON.Debug.AxesViewer(scene);
+        node.metadata.axisViewer = viewer;
+        const x = new BABYLON.Vector3(1, 0, 0);
+        const y = new BABYLON.Vector3(0, 1, 0);
+        const z = new BABYLON.Vector3(0, 0, 1);
+
+        node.metadata.onBeforeRenderObserver = scene.onBeforeRenderObservable.add(() => {
+            let matrix = node.getWorldMatrix();
+            let extend = BABYLON.Tmp.Vector3[0];
+            const worldExtend = scene.getWorldExtends();
+            worldExtend.max.subtractToRef(worldExtend.min, extend);
+            extend.scaleInPlace(0.5 * 0.5);
+
+            viewer.scaleLines = Math.max(extend.x, extend.y, extend.z) * 2;
+            viewer.update(node.position, BABYLON.Vector3.TransformNormal(x, matrix), BABYLON.Vector3.TransformNormal(y, matrix), BABYLON.Vector3.TransformNormal(z, matrix));
+        });
+
+        this.setState({ displayAxis: true });
+    }
+
+    render() {
+        return (
+            <CheckBoxLineComponent label="Display axes" isSelected={() => this.state.displayAxis} onSelect={() => this.displayAxes()} />
+        )
+    }
+}

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/meshPropertyGridComponent.tsx

@@ -7,6 +7,7 @@ import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 import { Vector3LineComponent } from "../../../lines/vector3LineComponent";
 import { SliderLineComponent } from "../../../lines/sliderLineComponent";
 import { QuaternionLineComponent } from "../../../lines/quaternionLineComponent";
+import { AxesViewerComponent } from "./axesViewerComponent";
 
 interface IMeshPropertyGridComponentProps {
     mesh: Mesh,
@@ -184,6 +185,7 @@ export class MeshPropertyGridComponent extends React.Component<IMeshPropertyGrid
                         mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind) &&
                         <CheckBoxLineComponent label="Render vertex normals" isSelected={() => renderNormalVectors} onSelect={() => this.renderNormalVectors()} />
                     }
+                    <AxesViewerComponent node={mesh} />
                 </LineContainerComponent>
             </div>
         );

inspector/src/components/actionTabs/tabs/propertyGrids/meshes/transformNodePropertyGridComponent.tsx

@@ -6,6 +6,7 @@ import { CheckBoxLineComponent } from "../../../lines/checkBoxLineComponent";
 import { Vector3LineComponent } from "../../../lines/vector3LineComponent";
 import { TextLineComponent } from "../../../lines/textLineComponent";
 import { QuaternionLineComponent } from "../../../lines/quaternionLineComponent";
+import { AxesViewerComponent } from "./axesViewerComponent";
 
 interface ITransformNodePropertyGridComponentProps {
     transformNode: TransformNode,
@@ -40,6 +41,9 @@ export class TransformNodePropertyGridComponent extends React.Component<ITransfo
                     }
                     <Vector3LineComponent label="Scaling" target={transformNode} propertyName="scaling" onPropertyChangedObservable={this.props.onPropertyChangedObservable} />
                 </LineContainerComponent>
+                <LineContainerComponent title="DEBUG" closed={true}>
+                    <AxesViewerComponent node={transformNode} />
+                </LineContainerComponent>
             </div>
         );
     }