Add Velocity component and system for entity movement; integrate into EngineLoop and EntityScene for circular motion demonstration

Author: jonit-dev

src/core/components/EngineLoop.tsx

@@ -4,6 +4,7 @@ import { ReactNode, useEffect } from 'react';
 
 import { useGameLoop } from '../lib/gameLoop';
 import { runPhysicsSyncSystem } from '../systems/PhysicsSyncSystem';
+import { runVelocitySystem } from '../systems/VelocitySystem';
 
 // Types for component props
 interface EngineLoopProps {
@@ -82,15 +83,18 @@ export const EngineLoop = ({
  * This would be expanded as more systems are added
  */
 function runECSSystems(deltaTime: number) {
+  // Run velocity system first - updates positions based on velocity
+  const velocityCount = runVelocitySystem(deltaTime);
+
   // Run physics sync system - syncs physics bodies with Transform components
   const physicsSyncCount = runPhysicsSyncSystem(deltaTime);
 
   // For future systems, add them here in the appropriate order
   // e.g., movementSystem(ecsWorld, deltaTime);
 
   // Debug info
-  if (physicsSyncCount > 0) {
+  if (physicsSyncCount > 0 || velocityCount > 0) {
     // Uncomment for debugging:
-    // console.log(`Updated ${physicsSyncCount} physics entities`);
+    // console.log(`Updated ${velocityCount} velocity entities and ${physicsSyncCount} physics entities`);
   }
 }

src/core/index.ts

@@ -27,6 +27,7 @@ export { useGameLoop } from './lib/gameLoop';
 
 // ECS
 export {
+  addVelocity,
   createEntity,
   destroyEntity,
   entityToObject,
@@ -35,6 +36,8 @@ export {
   resetWorld,
   Transform,
   transformQuery,
+  Velocity,
+  velocityQuery,
   world,
 } from './lib/ecs';
 
@@ -45,3 +48,4 @@ export {
   unregisterPhysicsBody,
 } from './systems/PhysicsSyncSystem';
 export { transformSystem } from './systems/transformSystem';
+export { runVelocitySystem } from './systems/VelocitySystem';

src/core/lib/ecs.ts

@@ -30,8 +30,21 @@ export const Transform = defineComponent({
   needsUpdate: Types.ui8,
 });
 
+// Velocity component for movement
+export const Velocity = defineComponent({
+  // Linear velocity (x, y, z)
+  linear: [Types.f32, 3],
+  // Angular velocity (around x, y, z axes)
+  angular: [Types.f32, 3],
+  // Damping factor for linear velocity (0-1)
+  linearDamping: Types.f32,
+  // Damping factor for angular velocity (0-1)
+  angularDamping: Types.f32,
+});
+
 // Define queries
 export const transformQuery = defineQuery([Transform]);
+export const velocityQuery = defineQuery([Transform, Velocity]);
 
 // Core entity functions
 export function createEntity() {
@@ -59,6 +72,35 @@ export function createEntity() {
   return entity;
 }
 
+// Add velocity to an entity with default values
+export function addVelocity(
+  entity: number,
+  options?: {
+    linear?: [number, number, number];
+    angular?: [number, number, number];
+    linearDamping?: number;
+    angularDamping?: number;
+  },
+) {
+  addComponent(world, Velocity, entity);
+
+  // Set default or provided values
+  Velocity.linear[entity][0] = options?.linear?.[0] || 0;
+  Velocity.linear[entity][1] = options?.linear?.[1] || 0;
+  Velocity.linear[entity][2] = options?.linear?.[2] || 0;
+
+  Velocity.angular[entity][0] = options?.angular?.[0] || 0;
+  Velocity.angular[entity][1] = options?.angular?.[1] || 0;
+  Velocity.angular[entity][2] = options?.angular?.[2] || 0;
+
+  Velocity.linearDamping[entity] =
+    options?.linearDamping !== undefined ? options.linearDamping : 0.01;
+  Velocity.angularDamping[entity] =
+    options?.angularDamping !== undefined ? options.angularDamping : 0.01;
+
+  return entity;
+}
+
 export function destroyEntity(entity: number) {
   // Remove from maps if associated with an object
   const object = entityToObject.get(entity);

src/core/systems/VelocitySystem.ts

@@ -0,0 +1,108 @@
+// Velocity System - Updates entity positions based on velocity
+import { Quaternion, Vector3 } from 'three';
+
+import { Transform, Velocity, velocityQuery, world } from '@core/lib/ecs';
+
+// Temporary vectors to avoid garbage collection
+const linearVelocity = new Vector3();
+const angularVelocity = new Vector3();
+const tempQuat = new Quaternion();
+
+/**
+ * System that applies velocity to transform positions
+ *
+ * @param deltaTime Time since last frame in seconds
+ * @returns Number of entities processed
+ */
+export function runVelocitySystem(deltaTime: number): number {
+  try {
+    // Find all entities with Transform and Velocity components
+    const entities = velocityQuery(world);
+
+    for (let i = 0; i < entities.length; i++) {
+      const eid = entities[i];
+
+      // Get linear velocity
+      linearVelocity.set(Velocity.linear[eid][0], Velocity.linear[eid][1], Velocity.linear[eid][2]);
+
+      // Skip if velocity is zero
+      if (linearVelocity.lengthSq() > 0.00001) {
+        // Apply linear damping
+        const linearDamping = Velocity.linearDamping[eid];
+        if (linearDamping > 0) {
+          linearVelocity.multiplyScalar(Math.pow(1 - linearDamping, deltaTime));
+
+          // Update the component values
+          Velocity.linear[eid][0] = linearVelocity.x;
+          Velocity.linear[eid][1] = linearVelocity.y;
+          Velocity.linear[eid][2] = linearVelocity.z;
+        }
+
+        // Scale by delta time
+        linearVelocity.multiplyScalar(deltaTime);
+
+        // Apply to position
+        Transform.position[eid][0] += linearVelocity.x;
+        Transform.position[eid][1] += linearVelocity.y;
+        Transform.position[eid][2] += linearVelocity.z;
+
+        // Mark for update
+        Transform.needsUpdate[eid] = 1;
+      }
+
+      // Get angular velocity
+      angularVelocity.set(
+        Velocity.angular[eid][0],
+        Velocity.angular[eid][1],
+        Velocity.angular[eid][2],
+      );
+
+      // Skip if angular velocity is zero
+      if (angularVelocity.lengthSq() > 0.00001) {
+        // Apply angular damping
+        const angularDamping = Velocity.angularDamping[eid];
+        if (angularDamping > 0) {
+          angularVelocity.multiplyScalar(Math.pow(1 - angularDamping, deltaTime));
+
+          // Update the component values
+          Velocity.angular[eid][0] = angularVelocity.x;
+          Velocity.angular[eid][1] = angularVelocity.y;
+          Velocity.angular[eid][2] = angularVelocity.z;
+        }
+
+        // Scale by delta time
+        angularVelocity.multiplyScalar(deltaTime);
+
+        // Create a rotation quaternion from the angular velocity
+        // This is a simplified approach - in a real physics system, we'd use more accurate integration
+        tempQuat.setFromAxisAngle(angularVelocity.normalize(), angularVelocity.length());
+
+        // Current rotation
+        const currentQuat = new Quaternion(
+          Transform.rotation[eid][0],
+          Transform.rotation[eid][1],
+          Transform.rotation[eid][2],
+          Transform.rotation[eid][3],
+        );
+
+        // Apply rotation (multiply quaternions)
+        currentQuat.premultiply(tempQuat);
+        currentQuat.normalize(); // Normalize to prevent floating point errors accumulating
+
+        // Update the transform rotation
+        Transform.rotation[eid][0] = currentQuat.x;
+        Transform.rotation[eid][1] = currentQuat.y;
+        Transform.rotation[eid][2] = currentQuat.z;
+        Transform.rotation[eid][3] = currentQuat.w;
+
+        // Mark for update
+        Transform.needsUpdate[eid] = 1;
+      }
+    }
+
+    return entities.length;
+  } catch (error) {
+    console.error('Error in velocity system:', error);
+    return 0;
+  }
+}

src/game/scenes/EntityScene.tsx

@@ -4,7 +4,7 @@ import { Physics, RigidBody } from '@react-three/rapier';
 import React, { useEffect, useRef, useState } from 'react';
 import { Mesh } from 'three';
 
-import { Entity, PhysicsBox, PhysicsSphere } from '@/core';
+import { Entity, PhysicsBox, PhysicsSphere, addVelocity } from '@/core';
 
 /**
  * Entity Scene Component
@@ -61,6 +61,9 @@ export const EntityScene: React.FC = () => {
 
             {/* Custom entity with update logic */}
             <RotatingEntity />
+
+            {/* Entity using velocity component */}
+            <VelocityEntity />
           </>
         )}
       </Physics>
@@ -150,4 +153,62 @@ const RotatingEntity: React.FC = () => {
   );
 };
 
+/**
+ * Entity that uses the Velocity component to move in a circular pattern
+ */
+const VelocityEntity: React.FC = () => {
+  const entityRef = useRef<number | null>(null);
+  const time = useRef(0);
+
+  // Setup and update velocity for circular movement
+  useFrame((_, delta) => {
+    time.current += delta;
+
+    // Calculate velocity for circular movement
+    if (entityRef.current !== null) {
+      // Example of how to change velocity dynamically
+      // This creates a circular-like motion by changing velocity direction
+      const speed = 2;
+      const circleRadius = 3;
+
+      // Calculate velocity based on position in circle
+      const angle = time.current * 0.5; // Rotate slower than time
+      const vx = Math.cos(angle) * speed;
+      const vz = Math.sin(angle) * speed;
+
+      // Update the velocity - normally we'd use ECS component access but
+      // for demo purposes and to avoid race conditions, we're calling addVelocity
+      addVelocity(entityRef.current, {
+        linear: [vx, 0, vz],
+        linearDamping: 0.1, // Add some damping to smooth movement
+      });
+    }
+  });
+
+  return (
+    <Entity
+      position={[-3, 0.5, 0]}
+      onUpdate={(entityId) => {
+        // Store the entity ID on first update
+        if (entityRef.current === null) {
+          entityRef.current = entityId;
+
+          // Initialize velocity with zero to add the component
+          addVelocity(entityId, {
+            linear: [0, 0, 0],
+            angular: [0, 0.5, 0], // Add some spin too
+            linearDamping: 0.1,
+            angularDamping: 0.01,
+          });
+        }
+      }}
+    >
+      <mesh castShadow>
+        <dodecahedronGeometry args={[0.7]} />
+        <meshStandardMaterial color="#00ffcc" />
+      </mesh>
+    </Entity>
+  );
+};
+
 export default EntityScene;