Fix wheels position on the vehicle #270

packages/client/src/main.ts

@@ -1,4 +1,11 @@
-import { ArcRotateCamera, Engine, Scene, Vector3 } from "@babylonjs/core";
+import {
+  ArcRotateCamera,
+  Axis,
+  Engine,
+  Scene,
+  Space,
+  Vector3,
+} from "@babylonjs/core";
 import "toastify-js/src/toastify.css";
 import { FEATURES_NAMES, features } from "@neu5/types/src";
 
@@ -85,7 +92,7 @@ ui.MobileControls.updateControls({ dialog, game, mobileControlsEls });
 
 const startEngineLoop = ({
   engine,
-  // playersMap,
+  playersMap,
   scene,
 }: {
   engine: Engine;
@@ -110,6 +117,65 @@ const startEngineLoop = ({
 
   camera.attachControl(canvas, true);
 
+  const maxVehicleForce = 2200;
+  const maxSteerValue = 0.6;
+  const steeringIncrement = 0.005;
+  const steerRecover = 0.05;
+  let forwardForce = 0;
+  let steerValue = 0;
+  let steerDirection = 0;
+
+  const chassisPhysicsBody = playersMap[0].chassisPhysicsBody;
+  const vehicle = playersMap[0].vehicle;
+  const wheelMeshes = playersMap[0].wheelMeshes;
+
+  scene.onBeforeRenderObservable.add(() => {
+    forwardForce = 0;
+    steerDirection = 0;
+
+    steerValue += steerDirection * steeringIncrement;
+    steerValue = Math.min(Math.max(steerValue, -maxSteerValue), maxSteerValue);
+    steerValue *= 1 - (1 - Math.abs(steerDirection)) * steerRecover;
+
+    if (vehicle === null) {
+      return;
+    }
+
+    console.log(vehicle);
+
+    vehicle.wheels[2].steering = steerValue;
+    vehicle.wheels[3].steering = steerValue;
+
+    vehicle.wheels[2].force = forwardForce * maxVehicleForce;
+    vehicle.wheels[3].force = forwardForce * maxVehicleForce;
+
+    vehicle.update();
+
+    vehicle.wheels.forEach((wheel, index) => {
+      if (!wheelMeshes[index]) return;
+      wheelMesh = wheelMeshes[index];
+      wheelMesh.position.copyFrom(wheel.transform.position);
+
+      if (wheelMesh.rotationQuaternion && wheel.transform.rotationQuaternion) {
+        wheelMesh.rotationQuaternion.copyFrom(
+          wheel.transform.rotationQuaternion
+        );
+      }
+
+      wheelMesh.rotate(Axis.Z, Math.PI / 2, Space.LOCAL);
+    });
+
+    if (vehicle.nWheelsOnGround <= 2) {
+      chassisPhysicsBody.setMassProperties({
+        centerOfMass: new Vector3(0, 0, 0),
+      });
+    } else {
+      chassisPhysicsBody.setMassProperties({
+        centerOfMass: new Vector3(0, -0.5, 0),
+      });
+    }
+  });
+
   engine.runRenderLoop(() => {
     scene.render();
 

packages/client/src/scene/scene.ts

@@ -15,7 +15,7 @@
 
 import type { Engine } from "@babylonjs/core";
 import type { GameConfig, GameObject } from "@neu5/types/src";
 import type { Player, PlayersMap } from "../main";
 // import { UIPlayersIndicators } from "../ui";
 
 // const speedometerEl = document.getElementById("speedometer") as HTMLElement;
@@ -126,7 +126,7 @@
   // gameConfig,
   gameObjects,
   playersMap,
   sendAction,
 }: {
   engine: Engine;
   gameConfig: GameConfig;
@@ -185,11 +185,18 @@
 
   if (playersMap.length) {
     playersMap.forEach((player: any) => {
-      player.vehicle = addVehicle({
+      const { chassisPhysicsBody, wheelMeshes, vehicle } = addVehicle({
         colorName: player.color,
         scene,
         shadowGenerator,
       });
+
+      Object.assign(player, {
+        chassisPhysicsBody,
+        wheelMeshes,
+        vehicle,
+      });
+
       // player.vehicle = addRigidVehicle({
       //   colorName: player.color,
       //   scene,
@@ -198,19 +205,19 @@
     });
   }
 
-  setInterval(() => {
-    playersMap.forEach((player: Player) => {
-      if (player.isCurrentPlayer) {
-        sendAction(
-          Object.entries(actions)
-            .filter(
-              ([key, value]) => value === true // eslint-disable-line
-            )
-            .map(([name]) => name)
-        );
-      }
-    });
-  }, 50);
+  // setInterval(() => {
+  //   playersMap.forEach((player: Player) => {
+  //     if (player.isCurrentPlayer) {
+  //       sendAction(
+  //         Object.entries(actions)
+  //           .filter(
+  //             ([key, value]) => value === true // eslint-disable-line
+  //           )
+  //           .map(([name]) => name)
+  //       );
+  //     }
+  //   });
+  // }, 50);
 
   return { playersMap, scene };
 };

packages/client/src/utils/index.ts

@@ -1,13 +1,10 @@
 import {
-  Axis,
   Color3,
   MeshBuilder,
   PhysicsBody,
-  PhysicsEngine,
   PhysicsMotionType,
   PhysicsShapeConvexHull,
   Quaternion,
-  Space,
   StandardMaterial,
   Vector3,
 } from "@babylonjs/core";
@@ -170,7 +167,7 @@ const addVehicle = ({
   const physicsEngine = scene.getPhysicsEngine();
   let vehicle: RaycastVehicle | null = null;
 
-  if (physicsEngine instanceof PhysicsEngine) {
+  if (physicsEngine !== null) {
     vehicle = new RaycastVehicle(chassisPhysicsBody, physicsEngine, scene);
   }
 
@@ -212,60 +209,7 @@ const addVehicle = ({
   vehicle.addAntiRollAxle({ wheelA: 0, wheelB: 1, force: 10000 }); // right rear - left rear
   vehicle.addAntiRollAxle({ wheelA: 2, wheelB: 3, force: 10000 }); // left front - right rear
 
-  const maxVehicleForce = 2200;
-  const maxSteerValue = 0.6;
-  const steeringIncrement = 0.005;
-  const steerRecover = 0.05;
-  let forwardForce = 0;
-  let steerValue = 0;
-  let steerDirection = 0;
-
-  scene.onBeforeRenderObservable.add(() => {
-    forwardForce = 0;
-    steerDirection = 0;
-
-    steerValue += steerDirection * steeringIncrement;
-    steerValue = Math.min(Math.max(steerValue, -maxSteerValue), maxSteerValue);
-    steerValue *= 1 - (1 - Math.abs(steerDirection)) * steerRecover;
-
-    if (vehicle === null) {
-      return;
-    }
-
-    vehicle.wheels[2].steering = steerValue;
-    vehicle.wheels[3].steering = steerValue;
-
-    vehicle.wheels[2].force = forwardForce * maxVehicleForce;
-    vehicle.wheels[3].force = forwardForce * maxVehicleForce;
-
-    vehicle.update();
-
-    vehicle.wheels.forEach((wheel, index) => {
-      if (!wheelMeshes[index]) return;
-      wheelMesh = wheelMeshes[index];
-      wheelMesh.position.copyFrom(wheel.transform.position);
-
-      if (wheelMesh.rotationQuaternion && wheel.transform.rotationQuaternion) {
-        wheelMesh.rotationQuaternion.copyFrom(
-          wheel.transform.rotationQuaternion
-        );
-      }
-
-      wheelMesh.rotate(Axis.Z, Math.PI / 2, Space.LOCAL);
-    });
-
-    if (vehicle.nWheelsOnGround <= 2) {
-      chassisPhysicsBody.setMassProperties({
-        centerOfMass: new Vector3(0, 0, 0),
-      });
-    } else {
-      chassisPhysicsBody.setMassProperties({
-        centerOfMass: new Vector3(0, -0.5, 0),
-      });
-    }
-  });
-
-  return vehicle;
+  return { chassisPhysicsBody, wheelMeshes, vehicle };
 };
 
 const TOAST_COLORS = {