decomposed functions for rig platform.

index.html

@@ -49,7 +49,6 @@
 <div id="graphContainer"></div>
 <div id="questLaunch"><a href="https://www.oculus.com/open_url/?url=https://www.deepdiagram.com/">Launch On Quest</a>
 </div>
-<input id="textInput" type="text"/>
 <script type="module" src="./src/app.ts"></script>
 </body>
 </html>

src/controllers/functions/buildRig.ts

@@ -0,0 +1,33 @@
+import {
+    Color3,
+    Mesh,
+    MeshBuilder,
+    PhysicsAggregate,
+    PhysicsMotionType,
+    PhysicsShapeType,
+    Scene,
+    StandardMaterial,
+    Vector3
+} from "@babylonjs/core";
+
+export function buildRig(scene: Scene): Mesh {
+    const rigMesh = MeshBuilder.CreateBox("platform", {width: 2, height: .02, depth: 2}, scene);
+    for (const cam of scene.cameras) {
+        cam.parent = rigMesh;
+    }
+    const rigMaterial = new StandardMaterial("rigMaterial", scene);
+    rigMaterial.diffuseColor = Color3.Blue();
+    rigMesh.material = rigMaterial;
+    rigMesh.setAbsolutePosition(new Vector3(0, .1, -3));
+    rigMesh.visibility = 0;
+    const rigAggregate =
+        new PhysicsAggregate(
+            rigMesh,
+            PhysicsShapeType.CYLINDER,
+            {friction: 0, center: Vector3.Zero(), radius: .5, mass: 10, restitution: .01},
+            scene);
+
+    rigAggregate.body.setMotionType(PhysicsMotionType.DYNAMIC);
+    rigAggregate.body.setGravityFactor(.02);
+    return rigMesh;
+}

src/controllers/rigplatform.ts

@@ -1,26 +1,14 @@
-import {
+import {Angle, Mesh, Quaternion, Scene, Vector3, WebXRDefaultExperience} from "@babylonjs/core";
-    Angle,
-    Camera,
-    Color3,
-    Mesh,
-    MeshBuilder,
-    PhysicsAggregate,
-    PhysicsBody,
-    PhysicsMotionType,
-    PhysicsShapeType,
-    Quaternion,
-    Scene,
-    StandardMaterial,
-    Vector3,
-    WebXRDefaultExperience
-} from "@babylonjs/core";
 import {Right} from "./right";
 import {Left} from "./left";
 import {EditMenu} from "../menus/editMenu";
 import {ControllerEvent, ControllerEventType, Controllers} from "./controllers";
 import log from "loglevel";
 import {DiagramManager} from "../diagram/diagramManager";
+import {buildRig} from "./functions/buildRig";
 
+const RIGHT = "right";
+const LEFT = "left";
 
 export class Rigplatform {
     private velocityIndex = 2;
@@ -30,11 +18,10 @@ export class Rigplatform {
     public static instance: Rigplatform;
     private rightController: Right;
     private leftController: Left;
-    private static xr: WebXRDefaultExperience;
+    private xr: WebXRDefaultExperience;
     private yRotation: number = 0;
-    public body: PhysicsBody;
     public rigMesh: Mesh;
-    private camera: Camera;
+
     private turning: boolean = false;
     private velocity: Vector3 = Vector3.Zero();
     private turnVelocity: number = 0;
@@ -42,14 +29,20 @@ export class Rigplatform {
     private readonly diagramManager: DiagramManager;
     private readonly controllers: Controllers;
     private registered = false;
-    private registerVelocityObserver() {
+
-        this.scene.onBeforeRenderObservable.add(() => {
+    constructor(scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers) {
-            const vel = this.velocity.applyRotationQuaternion(this.scene.activeCamera.absoluteRotation);
+        this.scene = scene;
-            if (vel.length() > 0) {
+        this.diagramManager = diagramManager;
-                this.logger.debug('Velocity', this.velocity, vel, this.scene.activeCamera.absoluteRotation);
+        this.controllers = controllers;
-            }
+        this.xr = xr;
-            this.body.setLinearVelocity(vel);
+        this.bMenu = new EditMenu(scene, xr, this.diagramManager, controllers);
+        this.rigMesh = buildRig(scene);
+        this.fixRotation();
+        this.initializeControllers();
+        scene.onActiveCameraChanged.add((s) => {
+            s.activeCamera.parent = this.rigMesh;
         });
+        this.registerVelocityObserver();
     }
     public forwardback(val: number) {
         this.velocity.z = (val * this.velocityArray[this.velocityIndex])*-1;
@@ -62,7 +55,6 @@ export class Rigplatform {
     }
     public turn(val: number) {
         const snap = this.diagramManager.config.current?.turnSnap;
-
         if (snap && snap > 0) {
             if (!this.turning) {
                 if (Math.abs(val) > .1) {
@@ -83,43 +75,14 @@ export class Rigplatform {
         }
     }
 
-    constructor(scene: Scene, xr: WebXRDefaultExperience, diagramManager: DiagramManager, controllers: Controllers) {
+    private registerVelocityObserver() {
-
+        this.scene.onBeforeRenderObservable.add(() => {
-        this.scene = scene;
+            const vel = this.velocity.applyRotationQuaternion(this.scene.activeCamera.absoluteRotation);
-        this.diagramManager = diagramManager;
+            if (vel.length() > 0) {
-        this.controllers = controllers;
+                this.logger.debug('Velocity', this.velocity, vel, this.scene.activeCamera.absoluteRotation);
-        Rigplatform.xr = xr;
+            }
-        Rigplatform.instance = this;
+            this.rigMesh.physicsBody.setLinearVelocity(vel);
-        this.bMenu = new EditMenu(scene, xr, this.diagramManager, controllers);
-        this.camera = scene.activeCamera;
-
-        this.rigMesh = MeshBuilder.CreateBox("platform", {width: 2, height: .02, depth: 2}, scene);
-        for (const cam of scene.cameras) {
-            cam.parent = this.rigMesh;
-        }
-        const rigMaterial = new StandardMaterial("rigMaterial", scene);
-        rigMaterial.diffuseColor = Color3.Blue();
-        this.rigMesh.material = rigMaterial;
-        this.rigMesh.setAbsolutePosition(new Vector3(0, .1, -3));
-        this.rigMesh.visibility = 0;
-        const rigAggregate =
-            new PhysicsAggregate(
-                this.rigMesh,
-                PhysicsShapeType.CYLINDER,
-                {friction: 0, center: Vector3.Zero(), radius: .5, mass: 10, restitution: .01},
-                scene);
-
-        rigAggregate.body.setMotionType(PhysicsMotionType.DYNAMIC);
-        rigAggregate.body.setGravityFactor(.02);
-        this.fixRotation();
-        this.body = rigAggregate.body;
-
-        this.initializeControllers();
-        scene.onActiveCameraChanged.add((s) => {
-            this.camera = s.activeCamera;
-            this.camera.parent = this.rigMesh;
         });
-        this.registerVelocityObserver();
     }
 
     private registerObserver() {
@@ -159,28 +122,25 @@ export class Rigplatform {
                 }
             });
         }
-
     }
 
     private initializeControllers() {
-        Rigplatform.xr.input.onControllerAddedObservable.add((source) => {
+        this.xr.input.onControllerAddedObservable.add((source) => {
             this.registerObserver();
             let controller;
             switch (source.inputSource.handedness) {
-                case "right":
+                case RIGHT:
                     if (!this.rightController) {
-                        this.rightController = new Right(source, this.scene, Rigplatform.xr, this.diagramManager, this.controllers);
+                        this.rightController = new Right(source, this.scene, this.xr, this.diagramManager, this.controllers);
                     }
                     break;
-                case "left":
+                case LEFT:
                     if (!this.leftController) {
-                        this.leftController = new Left(source, this.scene, Rigplatform.xr, this.diagramManager, this.controllers);
+                        this.leftController = new Left(source, this.scene, this.xr, this.diagramManager, this.controllers);
                     }
-
                     break;
-
             }
-            Rigplatform.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
+            this.xr.baseExperience.camera.position = new Vector3(0, 1.6, 0);
             if (controller) {
                 controller.setRig(this);
             }
@@ -189,17 +149,16 @@ export class Rigplatform {
     private fixRotation() {
         this.scene.onAfterPhysicsObservable.add(() => {
             const turnSnap = this.diagramManager.config.current?.turnSnap;
-
             if (turnSnap && turnSnap > 0) {
                 const q = this.rigMesh.rotationQuaternion;
-                this.body.setAngularVelocity(Vector3.Zero());
+                this.rigMesh.physicsBody.setAngularVelocity(Vector3.Zero());
                 if (q) {
                     const e = q.toEulerAngles();
                     e.y += this.yRotation;
                     q.copyFrom(Quaternion.FromEulerAngles(0, e.y, 0));
                 }
             } else {
-                this.body.setAngularVelocity(Vector3.Up().scale(this.turnVelocity));
+                this.rigMesh.physicsBody.setAngularVelocity(Vector3.Up().scale(this.turnVelocity));
             }
         }, -1, false, this, false);
     }

src/toolbox/functions/buildColor.ts

@@ -14,7 +14,7 @@ export function buildColor(color: Color3, scene: Scene, parent: TransformNode, i
         width: width,
         height: .01,
         depth: depth
-    }, this.scene);
+    }, scene);
     mesh.material = material;
     mesh.position.z = index / 4;
     mesh.parent = parent;

src/toolbox/functions/buildMesh.ts

@@ -1,26 +1,26 @@
 import {ToolType} from "../types/toolType";
-import {Mesh, MeshBuilder} from "@babylonjs/core";
+import {Mesh, MeshBuilder, Scene} from "@babylonjs/core";
 
-export function buildMesh(type: ToolType, toolname: string): Mesh {
+export function buildMesh(type: ToolType, toolname: string, scene: Scene): Mesh {
     switch (type) {
         case ToolType.BOX:
-            return MeshBuilder.CreateBox(toolname, {width: 1, height: 1, depth: 1}, this.scene);
+            return MeshBuilder.CreateBox(toolname, {width: 1, height: 1, depth: 1}, scene);
 
         case ToolType.SPHERE:
-            return MeshBuilder.CreateSphere(toolname, {diameter: 1}, this.scene);
+            return MeshBuilder.CreateSphere(toolname, {diameter: 1}, scene);
 
         case ToolType.CYLINDER:
-            return MeshBuilder.CreateCylinder(toolname, {height: 1, diameter: 1}, this.scene);
+            return MeshBuilder.CreateCylinder(toolname, {height: 1, diameter: 1}, scene);
 
         case ToolType.CONE:
             return MeshBuilder.CreateCylinder(toolname, {
                 diameterTop: 0,
                 height: 1,
                 diameterBottom: 1
-            }, this.scene);
+            }, scene);
 
         case ToolType.PLANE:
-            return MeshBuilder.CreatePlane(toolname, {width: 1, height: 1}, this.scene);
+            return MeshBuilder.CreatePlane(toolname, {width: 1, height: 1}, scene);
 
         case ToolType.OBJECT:
             return null;

src/toolbox/functions/buildTool.ts

@@ -5,9 +5,9 @@ import {buildMesh} from "./buildMesh";
 const WIDGET_SIZE = .1;
 
 export function buildTool(tool: ToolType, parent: AbstractMesh) {
-    const id = this.toolId(tool, (parent.material as StandardMaterial).diffuseColor);
+    const id = toolId(tool, (parent.material as StandardMaterial).diffuseColor);
 
-    const newItem = buildMesh(tool, `tool-${id}`);
+    const newItem = buildMesh(tool, `tool-${id}`, parent.getScene());
     if (!newItem) {
         return null;
     }